material-ui-file-dropzone

0.2.0 • Public • Published

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
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.

Package Sidebar

Install

npm i material-ui-file-dropzone

Weekly Downloads

9

Version

0.2.0

License

MIT

Unpacked Size

36.9 kB

Total Files

14

Last publish

Collaborators

  • lemaik