React Drag and Drop Files
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.
Demo
Installation
Install it from npm (using NPM).
npm i --save react-drag-drop-files
or:
yarn add react-drag-drop-files
Usage
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;
Options
Option | Type | Description | value example |
---|---|---|---|
name | string | the name for your form (if exist) | "myFile" |
label | string | the label (text) for your form (if exist) inside the uploading box - first word underlined | "Upload or drop a file right here" |
disabled | boolean | this for disabled the input | true OR false |
hoverTitle | string | text appears(hover) when trying to drop a file | "Drop here" |
file | file or null | this mainly made because if you would like to remove uploaded file 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 extentions to check and go throw | ['png', 'jpeg', ...] |
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 of error occured related to size min or max | (file) => console.log(file) |
onDrop | function | function that will be called when the user drop a file on the drop area only | (file) => console.log(file) |
onSelect | function | function that will be called when the user select a file on click the file area only | (file) => console.log(file) |
handleChange | function | function that will be called when the user select or drop a file | (file) => console.log(file) |
Upcoming...
- [x] Files Validation
- [ ] Adding Multiple Files
- [ ] Contribution Guide
- [x] Show different type of Errors
- [x] Add disabled props
- [x] Add custom label