Dropzone UI

Description

React components for mamanging file uploads. Components were made folllowing some of google's Material design principles.

Sample result:

list view

grid view

Installation

dropzone-ui is available as an npm package.

// with npm
npm i dropzone-ui

// with yarn
yarn add dropzone-ui

Usage and examples

Here is a quick example to get you started, it's all you need:

import React from "react";
import ReactDOM from "react-dom";
import { Dropzone, FileItem } from "dropzone-ui";
function App() {
    const [files, setFiles] = useState([]);
    const updateFiles = (incommingFiles) => {
        setFiles(incommingFiles);
    };
  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
    >
      {files.map((file) => (
        <FileItem {...file} preview />
      ))}
    </Dropzone>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

Yes, it's really all you need to get started as you can see in this live and interactive demo:

Dropzone UI Components API

• <Dropzone/>
• <DropzoneLabel />
• <FileItem />
• <ImageFullScreen />
• <InputButton />

Dropzone API

Props

DropzoneLabel API

Props

FileItem API

Props

FileList API

Props

ImageFullScreen API

Props

InputButton API

Props and Methods

Name	Type	Default	Description
closeIcon	bool	true	The icon to display in place of the default close icon.
disabled	bool	false	If true, the Dropzone input will be disabled.
fullWidth	bool	false	If true, the Dropzone container will take up the full width of its container.
multiple	bool	false	If true, value must be an array and the Dropzone will support multiple files.
size	'small'	'medium'	The size of the Dropzone.
	'medium'	-	-
	'large'	-	-
accept	-	-	-
onDragEnter	-	-	-
onDragLeave	-	-	-
onDragOver	-	-	-
onDrop	-	-	-
method	-	-	-

License

This project is licensed under the terms of the MIT license.