Light-weight React Drag And Drop File And Image Upload Library


Category: React React Form | June 24, 2021
Author:KarimMokhtar
Official Page:Go to website
Last Update:June 24, 2021
License:MIT

Description:

A simple and light weight React Drag and drop file and image upload component, that helps you in enhancing your form features and very easy to implement in your existing or new project.

How can I use it?

First, install the library with NPM as following.

npm i --save react-drag-drop-files

Then, import the library.

import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";

Now, create the drag and drop file and image upload feature.

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;

Available Options:

OptionType
namestring
classesstring
typesArray
onTypeErrorfunction
childrenJSX Element, any
maxSizenumber
minSizenumber
onSizeErrorfunction
onDropfunction
onSelectfunction