Dropzone API
API reference docs for the React Dropzone component. Learn about the props and other APIs of this exported module.
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | ExtFile | [] | Just like any other input component. The value of the input element, required for a controlled component. |
| onChange | func | Probably one of the most important methods (callbacks). Returns as first parameter an array of `ExtFile` objects. This callback is fired every time the array of ExtFile changes. On validation, on delete, on drop, on select from file dialog or when upload proces changes the status of files. Signature: (files: ExtFile[]) => void | |
| accept | string | A comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. The default implementation of accept checks the file's mime type or extension against this list. More information can be found here. | |
| maxFiles | number | The max number of files to be accepted. | |
| maxFileSize | number | The max file size allowed in bytes. | |
| validator | func | Callback fired when the delete icon is clicked. If set, the delete icon will be shown. Signature: (f: File) => ValidateFileResponse | |
| onClean | func | Callback fired when the clean icon is clicked. If set and if validation is active, the clean icon will be shown. | |
| autoClean | boolean | If true, the component will automatically remove non valid files when user drops files or selects them from file dialog. This flag will only work if validation is active. | |
| cleanFiles | boolean | If set, "clean" button will be shown and every time user clicks the buttom it will trigger the default "clean operation": Remove non valid files. This flag will only work if validation is active. | |
| uploadConfig | The configuration needed for uploading the files. If not set or or uploadConfig.url is undefined the upload button will not be visible and uploadOnDrop prop flag will not work. | ||
| fakeUpload | boolean | If set, the component will simulate the upload operation by randomly setting the upload status and message on each uploadable ExtFile . It will also set a fake progress. Will also ignore the uploadConfig prop and will show the upload button | |
| onUploadStart | func | Callback fired when the upload process starts. Signature: (uploadAbleFiles: ExtFile[]) => void
| |
| onUploadFinish | func | Callback fired when the upload process ends. Signature: (uploadedFiles: ExtFile[]) => void
| |
| background | string | "transparent | The background color for dropzone container. |
| color | string | "#646c7f" | The main color for dropzone labels and borders. |
| minHeight | string | number | "180px" | The min height of the component. If the value is given in number format, "px" will be assumed |
| style | React.CSSProperties | The in-line style object applied to the main container. | |
| className | string | The classname to override the css styles in .css or .sass file instead of using in-line styles. Classname is applied to the main container. | |
| label | string | The label to place when no files were selected. | |
| localization | "EN-en" | "ES-es" | "FR-fr" | "IT-it" | "PT-pt" | "RU-ru" | "ZH-cn" | "ZH-hk" | "EN-en" | The language in which text labels are shown. |
| disableRipple | boolean | If true, will not show a ripple effect everytime the user drops files or clicks the dropzone for selecting files. | |
| onDragEnter | func | Method for performing specific tasks on drag enter operations. Signature: (evt: React.DragEvent<HTMLDivElement>) => void | |
| onDragLeave | func | Method for performing specific tasks on drag leave operations. Signature: (evt: React.DragEvent<HTMLDivElement>) => void | |
| actionButtons | If set, buttons will be added before or after of the component. This buttons triggresthe common opertions of the component such as clean, upload, abort and delete all. | ||
| dropOnLayer | boolean | If true, the drop operation will be performed in a layer that covers the complete component container. | |
| footer | boolean | If false, hides the dropzone footer. | |
| header | boolean | If false, hides the dropzone header. | |
| headerConfig | Configuration related to the dropzone header. | ||
| footerConfig | Configuration related to the dropzone footer. | ||
| disabled | boolean | false | If true, the component is disabled. |
| clickable | boolean | false | If false, the component will not be clickable. So, file dialog will not be opened. |
| behaviour | "add" | "replace" | "add" | The behaviour when new files are selected or dropped |
| children | React.ReactNode | The content of the dropozone. Tipically it is an array of <FileMosaic/> components. |
