Material-UI File Dropzone

This project provides drag and drop file selector components for Material-UI. Take a look at the demos.

At the moment, this project is at an early stage. We want to explore possible use cases and explore what the API should look like. Please open an issue if there's something missing or if you encounter a bug.

Installation

npm i --save material-ui-file-dropzone

Usage

DropAreaBase

Basic component to implement a container that files can be dropped on. This is the foundation of the other components and can be used to create custom upload controls.

Name	Type	Default	Description
accept	string	The accepted file types as a comma-separated list of MIME types or file extensions. If not set, any file type will be accepted.
children	node	Used to render content in the drop area.
clickable	bool	If true, the drop area can be clicked to open a file selection dialog.
component	elementType	'div'	The component used for the root node.
disabled	bool	If true, the drop area will be disabled.
multiple	bool	If true, the drop area will accept multiple files.
onAcceptedDragEnter	func	Callback fired when a user drags one or more accepted files over the drop area.
onClick	func	Callback fired when the user clicks on the drop area.
onSelectFiles*	func	Callback fired when the user selects or drops one or more accepted files.

All other properties are passed through to the root element.

FileSelectArea

This is a very basic file selector that supports drag and drop as well as clicking to open a file selection dialog.

Name	Type	Default	Description
children	node	Used to render content in the drop area.
classes	object	Override or extend the styles applied to the component.
clickable	bool	true	If true, the drop area can be clicked to open a file selection dialog.
onSelectFiles*	func	Callback fired when the user selects or drops one or more accepted files.

All other properties are passed through to the underlying DropAreaBase.

InvisibleDropArea

The invisible drop area can be used for views where no drop area is shown but the user can drop files anywhere to trigger an action (e.g. upload it).

Name	Type	Default	Description
activeIcon	node	Icon to display when an accepted file is dragged over the area.
activeText	string	Text to display when an accepted file is dragged over the area.
children	node	Used to render content in the drop area.
classes	object	Override or extend the styles applied to the component.
onSelectFiles*	func	Callback fired when the user selects or drops one or more accepted files.

All other properties are passed through to the underlying DropAreaBase.

* required property

License

The files included in this repository are licensed under the MIT license.