import { default as React } from 'react'; import { Accept } from 'react-dropzone'; import { FieldAriaProps, FormError } from '../../types'; import { IFileWithStatus } from './interfaces'; import { IconType } from '../icon'; import { FileUploadContent, FileUploadDropZoneState, FileUploadError } from './types'; /** * Props for FileUpload component * @interface IFileUploadProps */ export default interface IFileUploadProps extends FormError, FieldAriaProps { /** * Accepted file types for upload. Files that do not match are rejected with a * `file-invalid-type` error. * * Accepts either: * - A comma-separated extension string, e.g. `'.pdf,.jpg,.png'`. * - A react-dropzone `Accept` object keyed by MIME type, e.g. * `{ 'image/png': ['.png'], 'application/pdf': ['.pdf'] }`. * Use the object form when the MIME type matters (e.g. blocking files * whose extension lies about their content). */ acceptedFileType?: string | Accept; /** * Maximum file size in megabytes * @default 5 */ maxSize?: number; /** * Allow multiple file uploads * @default false */ allowMultiple?: boolean; /** * Current files with their status */ value?: IFileWithStatus[]; /** * Optional callback will be called when files are dragged and dropped into the upload area * @param info.newFiles new files that are being added to the list * @param info.fileList current list of files */ onChange?: (info: { newFiles: IFileWithStatus[]; fileList: IFileWithStatus[]; }) => void; /** * Optional callback when a file needs to be downloaded */ onDownload?: (file: IFileWithStatus) => void; /** * Optional callback when a file needs to be removed */ onRemove?: (file: IFileWithStatus) => void; /** * Optional callback when a file needs to be uploaded */ onUpload?: (file: IFileWithStatus, setProgress: (progress: number) => void) => Promise | void; /** * Optional callback invoked once for every file rejected during validation * (oversized, unsupported type, or too many files). Fires in both controlled * and uncontrolled modes, letting the host app surface the error (e.g. a toast). * The in-list error display is unchanged. * @param error {@link FileUploadError} - the rejected file with a stable `code` and a human-readable `message` */ onError?: (error: FileUploadError) => void; /** * Icon of the dropzone. Accepts an icon name or a custom node. * Ignored when `renderContent` is set. * @default 'Upload' */ icon?: IconType; /** * Texts of the dropzone. Omitted fields keep their German default. * Ignored when `renderContent` is set. * @example * content={{ prompt: 'CSV-Datei hierher ziehen oder', browse: 'auswählen', hint: ({ maxSizeLabel }) => `Bis zu ${maxSizeLabel}` }} */ content?: FileUploadContent; /** * Replaces the icon and the texts of the dropzone with custom content. No layout or text styling is applied to it, so lay it out and style it yourself (for example with a wrapper that centers and pads it). * The dropzone itself (focus ring, keyboard handling, accessible name, drag and error colors) stays owned by FileUpload. * @param state {@link FileUploadDropZoneState} - drag, error, size and accepted-type state */ renderContent?: (state: FileUploadDropZoneState) => React.ReactNode; }