@carbon/react
Version:
React components for the Carbon Design System
110 lines (109 loc) • 3.42 kB
TypeScript
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { type HTMLAttributes } from 'react';
interface FileItem {
name: string;
uuid: string;
file: File;
}
export interface FileChangeData {
addedFiles: FileItem[];
removedFiles: FileItem[];
currentFiles: FileItem[];
action: 'add' | 'remove' | 'clear';
}
export interface FileDeleteData {
deletedFile: FileItem;
remainingFiles: FileItem[];
}
export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
/**
* Specify the types of files that this input should be able to receive
*/
accept?: string[];
/**
* Specify the type of the `<FileUploaderButton>`
*/
buttonKind?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'danger--primary' | 'danger--ghost' | 'danger--tertiary' | 'tertiary';
/**
* Provide the label text to be read by screen readers when interacting with
* the `<FileUploaderButton>`
*/
buttonLabel?: string;
/**
* Provide a custom className to be applied to the container node
*/
className?: string;
/**
* Specify whether file input is disabled
*/
disabled?: boolean;
/**
* Specify the status of the File Upload
*/
filenameStatus: 'edit' | 'complete' | 'uploading';
/**
* Provide a description for the complete/close icon that can be read by screen readers
*/
iconDescription?: string;
/**
* Specify the description text of this `<FileUploader>`
*/
labelDescription?: string;
/**
* Specify the title text of this `<FileUploader>`
*/
labelTitle?: string;
/**
* Specify if the component should accept multiple files to upload
*/
multiple?: boolean;
/**
* Provide a name for the underlying `<input>` node
*/
name?: string;
/**
* Provide an optional `onChange` hook that is called each time the input is changed.
* When 'enable-enhanced-file-uploader' feature flag is enabled:
* - Also fires for file deletions and clearFiles operations
* - Event includes enhanced file information in event.target
*/
onChange?: (event: any, data?: FileChangeData) => void;
/**
* Provide an optional `onClick` hook that is called each time the
* FileUploader is clicked
*/
onClick?: (event: any) => void;
/**
* Provide an optional `onDelete` hook that is called when an uploaded item is removed.
* When 'enable-enhanced-file-uploader' feature flag is enabled:
* - Event includes deleted file information in event.target
*/
onDelete?: (event: any, data?: FileDeleteData) => void;
/**
* Specify the size of the FileUploaderButton, from a list of available
* sizes.
*/
size?: 'sm' | 'small' | 'md' | 'field' | 'lg';
}
export interface FileUploaderHandle {
/**
* Clear internal state
*/
clearFiles: () => void;
/**
* Get current files (only available when 'enable-enhanced-file-uploader' feature flag is enabled)
*/
getCurrentFiles?: () => FileItem[];
}
declare const FileUploader: {
<ItemType>(props: FileUploaderProps): React.ReactElement<any>;
propTypes?: any;
contextTypes?: any;
defaultProps?: any;
};
export default FileUploader;