Package Exports

react-drag-drop-files

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-drag-drop-files) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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"`
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', ...]`
onTypeError	function	function that will be called only of error occured 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.	`<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...

Files Validation
Adding Multiple Files
Contribution Guide
Show different type of Errors

License

MIT