Carregador de arquivo simples para React

Uma biblioteca simples de upload de arquivos React que permite adicionar arquivos à área de upload de arquivos arrastando e soltando.

Uso básico:

1. Instale e importe a biblioteca.

# 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. Crie um uploader de arquivo simples de arrastar e soltar.

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. Adereços disponíveis.

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;

Visualização:

Detalhes do download:

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