1 | import * as React from "react";
|
2 |
|
3 | export { FileWithPath } from "file-selector";
|
4 | export default function Dropzone(
|
5 | props: DropzoneProps & React.RefAttributes<DropzoneRef>
|
6 | ): JSX.Element;
|
7 | export function useDropzone(options?: DropzoneOptions): DropzoneState;
|
8 |
|
9 | export interface DropzoneProps extends DropzoneOptions {
|
10 | children?(state: DropzoneState): JSX.Element;
|
11 | }
|
12 |
|
13 | export enum ErrorCode {
|
14 | FileInvalidType = "file-invalid-type",
|
15 | FileTooLarge = "file-too-large",
|
16 | FileTooSmall = "file-too-small",
|
17 | TooManyFiles = "too-many-files",
|
18 | }
|
19 |
|
20 | export interface FileError {
|
21 | message: string;
|
22 | code: ErrorCode | string;
|
23 | }
|
24 |
|
25 | export interface FileRejection {
|
26 | file: File;
|
27 | errors: FileError[];
|
28 | }
|
29 |
|
30 | export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
|
31 | accept?: Accept;
|
32 | minSize?: number;
|
33 | maxSize?: number;
|
34 | maxFiles?: number;
|
35 | preventDropOnDocument?: boolean;
|
36 | noClick?: boolean;
|
37 | noKeyboard?: boolean;
|
38 | noDrag?: boolean;
|
39 | noDragEventsBubbling?: boolean;
|
40 | disabled?: boolean;
|
41 | onDrop?: <T extends File>(
|
42 | acceptedFiles: T[],
|
43 | fileRejections: FileRejection[],
|
44 | event: DropEvent
|
45 | ) => void;
|
46 | onDropAccepted?: <T extends File>(files: T[], event: DropEvent) => void;
|
47 | onDropRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
|
48 | getFilesFromEvent?: (
|
49 | event: DropEvent
|
50 | ) => Promise<Array<File | DataTransferItem>>;
|
51 | onFileDialogCancel?: () => void;
|
52 | onFileDialogOpen?: () => void;
|
53 | onError?: (err: Error) => void;
|
54 | validator?: <T extends File>(file: T) => FileError | FileError[] | null;
|
55 | useFsAccessApi?: boolean;
|
56 | autoFocus?: boolean;
|
57 | };
|
58 |
|
59 | export type DropEvent =
|
60 | | React.DragEvent<HTMLElement>
|
61 | | React.ChangeEvent<HTMLInputElement>
|
62 | | DragEvent
|
63 | | Event;
|
64 |
|
65 | export type DropzoneState = DropzoneRef & {
|
66 | isFocused: boolean;
|
67 | isDragActive: boolean;
|
68 | isDragAccept: boolean;
|
69 | isDragReject: boolean;
|
70 | isFileDialogActive: boolean;
|
71 | acceptedFiles: File[];
|
72 | fileRejections: FileRejection[];
|
73 | rootRef: React.RefObject<HTMLElement>;
|
74 | inputRef: React.RefObject<HTMLInputElement>;
|
75 | getRootProps: <T extends DropzoneRootProps>(props?: T) => T;
|
76 | getInputProps: <T extends DropzoneInputProps>(props?: T) => T;
|
77 | };
|
78 |
|
79 | export interface DropzoneRef {
|
80 | open: () => void;
|
81 | }
|
82 |
|
83 | export interface DropzoneRootProps extends React.HTMLAttributes<HTMLElement> {
|
84 | refKey?: string;
|
85 | [key: string]: any;
|
86 | }
|
87 |
|
88 | export interface DropzoneInputProps
|
89 | extends React.InputHTMLAttributes<HTMLInputElement> {
|
90 | refKey?: string;
|
91 | }
|
92 |
|
93 | type PropTypes = "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave";
|
94 |
|
95 | export interface Accept {
|
96 | [key: string]: string[];
|
97 | }
|