Simple React Drad And Drop File Upload Library

A simple React file uploader library that allows you to add files to the file upload area via drag and drop.

Basic usage:

1. Install and import the library.

# Yarn
$ yarn add react-drag-drop-files

# NPM
$ npm i react-drag-drop-files –save

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

2. Create a simple drag and drop file uploader.

const fileTypes = ["JPG", "PNG", "ZIP"];
export default function App() {
  const [file, setFile] = useState(null);
  const handleChange = (file) => {
    setFile(file);
  };
  return (
    <div className="App">
      <h1>Hello To Drag & Drop Files</h1>
      <FileUploader handleChange={handleChange} name="file" types={fileTypes} />
      <p>{file ? `File name: ${file.name}` : "no files uploaded yet"}</p>
    </div>
  );
}

3. Available props.

name: string;
types?: Array<string>;
classes?: string;
children?: JSX.Element;
maxSize?: number;
minSize?: number;
onSizeError?: (arg0: string) => void;
onTypeError?: (arg0: string) => void;
onDrop?: (arg0: File) => void;
onSelect?: (arg0: File) => void;
handleChange: (arg0: File) => void;

Preview:

Download Details:

Author: KarimMokhtar

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/KarimMokhtar/react-drag-drop-files

License: MIT