react-drag-drop-files
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.7 • Public • Published

    React Drag and Drop Files

    Version code style: prettier npm download

    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

    Edit react-drag-drop-files

    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"
    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)

    How to contribute:

    • Please follow the instructions inside this file: here

    Upcoming...

    • [X] Contribution Guide
    • [X] Github actions

    License

    MIT

    Install

    npm i react-drag-drop-files

    DownloadsWeekly Downloads

    20,721

    Version

    2.3.7

    License

    MIT

    Unpacked Size

    38.6 kB

    Total Files

    19

    Last publish

    Collaborators

    • karimmokhtar