react-dropzone-material-ui
Try example: https://uraway.github.io/react-dropzone-material-ui
This is a React component based on react-dropzone and Material-UI.
Peer Dependencies
Install React v16
$ yarn add react@16 react-dom@16
Install Matterial UI v4
$ yarn add @material-ui/core@4 @material-ui/icons@4
Install react-dropzone >=8
$ yarn add react-dropzone
Install
yarn add react-dropzone-material-ui
Usage
import React useState useEffect from "react";import DropzoneArea from "react-dropzone-material-ui"; const App: React.FC = const files setFiles = useState<File[]>; ; return <div ="App"> <DropzoneArea = /> </div> ;; ;
Props
Currently supports only few props:
Name | Type | Default | Description |
---|---|---|---|
acceptedFiles | string[] | ["image/", "video/", "application/*"] | A list of file mime types user can add into the dropzone. ref: Unique file type specifiers |
dropzoneText | string | "Drag 'n' drop some files here, or click to select files" | Text in the dropzone. |
errorMessages | see errorMessages section below. | ||
filesLimit | number | 3 | Number of files user can add into the dropzone. |
maxFileSize | number | 3000000 | Maximum file size in bytes user can add into the dropzone. |
onChange | func | Callback function filred when a file is dropped, selected or deleted. function(files: File[]) => void |
errorMessages
You can change error messages with your own language by passing errorMessges
property:
errorMessages= acceptedFiles: "File type is not supported." filesLimit: "Maximun number of files is exceeded." maxFileSize: "File size is too big."
When a file is rejected, window alert will be evoked with these texts:
Develpment
Install modules in root and example
$ yarn run install-all
Start rollup & dev server
$ yarn run dev
License
This project is licensed under the terms of the MIT license.