uraway / react-dropzone-material-ui

Material UI dropzone component

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[]>([]);

  useEffect(() => {
    console.log(files);
  }, [files]);

  return (
    <div className="App">
      <DropzoneArea onChange={setFiles} />
    </div>
  );
};

export default App;

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.