Light and simple reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window.
Install it from npm (using NPM).
npm i --save react-drag-drop-files
or:
yarn add react-drag-drop-files
Using react hooks just as simple as:
import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";
const fileTypes = ["JPG", "PNG", "GIF"];
function DragDrop() {
const [file, setFile] = useState(null);
const handleChange = (file) => {
setFile(file);
};
return (
<FileUploader handleChange={handleChange} name="file" types={fileTypes} />
);
}
export default DragDrop;
Option | Type | Description | value example |
---|---|---|---|
name | string | the name for your form (if exist) | "myFile" |
multiple | boolean | a boolean to determine whether the multiple files is enabled or not | true OR false - false by default |
label | string | the label (text) for your form (if exist) inside the uploading box - first word underlined | "Upload or drop a file right here" |
uploadedLabel | string | the label (text) for your form (if exist) after a file was uploaded inside the uploading box | "Uploaded Successfully! Upload another?" |
required | boolean | Conditionally set the input field as required | true or false |
disabled | boolean | this for disabled the input | true OR false |
hoverTitle | string | text appears(hover) when trying to drop a file | "Drop here" |
fileOrFiles | Array |
this mainly made because if you would like to remove uploaded file(s) pass null or pass another file as initial | |
classes | string | string with the classes wished to add | "drop_area drop_zone" |
types | Array |
array of strings with extensions to check and go throw | ['png', 'jpeg', ...] |
onTypeError | function | function that will be called only of error occurred related to type | (err) => console.log(err) |
children | JSX Element, any | if you want to replace the current design inside the box of drop zone. (it will remove the default exist style) | <div><p>this is inside drop area</p></div> or just text |
maxSize | number | the maximum size of the file (number in mb) | 2 |
minSize | number | the minimum size of the file (number in mb) | 1 |
onSizeError | function | function that will be called only if error related to min or max size occurred | (file) => console.log(file) |
onDrop | function | function that will be called when the user drops file(s) on the drop area only | (file) => console.log(file) |
onSelect | function | function that will be called when the user selects file(s) on click the file area only | (file) => console.log(file) |
handleChange | function | function that will be called when the user selects or drops file(s) | (file) => console.log(file) |
onDraggingStateChange | function | function that will be called with the state of dragging | (dragging) => console.log(dragging) |
dropMessageStyle | CSS Properties | A CSS property to style the hover message | {backgroundColor: 'red'} |