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, you can 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:

Option
Type

name
string

classes
string

types
Array

onTypeError
function

children
JSX Element, any

maxSize
number

minSize
number

onSizeError
function

onDrop
function

onSelect
function

Hope it will help you.

The post Light-weight React Drag And Drop File And Image Upload Library appeared first on Lipku.com.