react-dropzone

const Dropzone: React.ForwardRefExoticComponent<any>;

useDropzone: (props?: DropzoneOptions) => DropzoneState;

type DropEvent =
    | React.DragEvent<HTMLElement>
    | React.ChangeEvent<HTMLInputElement>
    | DragEvent
    | Event;

type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, SharedProps> & {
    accept?: Accept;
    minSize?: number;
    maxSize?: number;
    maxFiles?: number;
    preventDropOnDocument?: boolean;
    noClick?: boolean;
    noKeyboard?: boolean;
    noDrag?: boolean;
    noDragEventsBubbling?: boolean;
    disabled?: boolean;
    onDrop?: <T extends File>(
        acceptedFiles: T[],
        fileRejections: FileRejection[],
        event: DropEvent
    ) => void;
    onDropAccepted?: <T extends File>(files: T[], event: DropEvent) => void;
    onDropRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
    getFilesFromEvent?: (
        event: DropEvent | Array<FileSystemFileHandle>
    ) => Promise<Array<File | DataTransferItem>>;
    onFileDialogCancel?: () => void;
    onFileDialogOpen?: () => void;
    onError?: (err: Error) => void;
    /**
     * Custom validation, run once per file on drop/selection. Return `null` to accept the file, or a
     * {@link FileError} (or array of them) to reject it. May be `async` (return a `Promise`) to support
     * checks that can't run synchronously - e.g. reading image dimensions, inspecting file contents,
     * or calling an external service. While an async validator is pending, {@link DropzoneState.isProcessing}
     * is `true`, and `onDrop`/`onDropAccepted`/`onDropRejected` fire only once it settles. If the
     * validator throws or rejects, `onError` is called and the drop is discarded.
     *
     * Note: the validator never runs during a drag (a `DataTransferItem` has no name/size), so a
     * validator-configured dropzone is `isDragUnknown` until drop.
     */
    validator?: <T extends File>(
        file: T
    ) => ValidatorResult | Promise<ValidatorResult>;
    /**
     * Override the message of any rejection error (built-in or custom). Called once per error;
     * receives the error and the file it belongs to and returns the message to use. Return
     * `error.message` for codes you don't want to change. Useful for localizing error messages.
     */
    getErrorMessage?: (error: FileError, file: File) => string;
    useFsAccessApi?: boolean;
    autoFocus?: boolean;
};

type DropzoneState = DropzoneRef & {
    isFocused: boolean;
    isDragActive: boolean;
    isDragAccept: boolean;
    isDragReject: boolean;
    isDragUnknown: boolean;
    isDragGlobal: boolean;
    isFileDialogActive: boolean;
    /**
     * `true` while a drop/selection is being processed asynchronously - i.e. while `getFilesFromEvent`
     * reads the files and/or an async {@link DropzoneOptions.validator} runs. Spans the whole pipeline,
     * from when files start being read until validation settles. When both are synchronous (the default
     * `getFilesFromEvent` with no/async-free validator) the work resolves within a microtask, so it's
     * only observable for genuinely async work. Use it to show a spinner or disable UI while processing.
     */
    isProcessing: boolean;
    acceptedFiles: readonly FileWithPath[];
    fileRejections: readonly FileRejection[];
    rootRef: React.RefObject<HTMLElement>;
    inputRef: React.RefObject<HTMLInputElement>;
    getRootProps: <T extends DropzoneRootProps>(props?: T) => T;
    getInputProps: <T extends DropzoneInputProps>(props?: T) => T;
};

type ValidatorResult = FileError | readonly FileError[] | null;