UNPKG

2.61 kBTypeScriptView Raw
1import * as React from "react";
2
3export { FileWithPath } from "file-selector";
4export default function Dropzone(
5 props: DropzoneProps & React.RefAttributes<DropzoneRef>
6): JSX.Element;
7export function useDropzone(options?: DropzoneOptions): DropzoneState;
8
9export interface DropzoneProps extends DropzoneOptions {
10 children?(state: DropzoneState): JSX.Element;
11}
12
13export enum ErrorCode {
14 FileInvalidType = "file-invalid-type",
15 FileTooLarge = "file-too-large",
16 FileTooSmall = "file-too-small",
17 TooManyFiles = "too-many-files",
18}
19
20export interface FileError {
21 message: string;
22 code: ErrorCode | string;
23}
24
25export interface FileRejection {
26 file: File;
27 errors: FileError[];
28}
29
30export 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
59export type DropEvent =
60 | React.DragEvent<HTMLElement>
61 | React.ChangeEvent<HTMLInputElement>
62 | DragEvent
63 | Event;
64
65export 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
79export interface DropzoneRef {
80 open: () => void;
81}
82
83export interface DropzoneRootProps extends React.HTMLAttributes<HTMLElement> {
84 refKey?: string;
85 [key: string]: any;
86}
87
88export interface DropzoneInputProps
89 extends React.InputHTMLAttributes<HTMLInputElement> {
90 refKey?: string;
91}
92
93type PropTypes = "multiple" | "onDragEnter" | "onDragOver" | "onDragLeave";
94
95export interface Accept {
96 [key: string]: string[];
97}