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"
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 or File or null	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'}

How to contribute:

• Please follow the instructions inside this file: here

Upcoming...

• Contribution Guide
• Github actions

License

MIT