react-browse-files

A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field with drag and drop support and preview of selected images.

Install

npm install --save react-browse-files

Or if you prefer yarn:

yarn add react-browse-files

Quick Example:

Create a simple upload button that accepts multiple PDF files (max 2MB per file / max 10MB for the whole selection).

import BrowseFiles from "react-browse-files";

<BrowseFiles
    multiple={true} 
    maxSize="2mb"
    multipleMaxSize="10mb"
    accept={["application/pdf","image/jpg","image/jpeg"]}
    onSuccess={files => this.setState({ files })}
    onError={errors => this.setState({ errors })}
>
    {({ browseFiles }) => (
        <>
            <button onClick={browseFiles}>Upload PDF</button>
            <ol>
                {this.state.files.map(file => (
                    <li key={file.name}>{file.name}</li>
                ))}
                {this.state.errors.map(error => (
                    <li key={error.file.name}>
                        {error.file.name} - {error.type}
                    </li>
                ))}
            </ol>
        </>
    )}
</BrowseFiles>

More examples on https://react-browse-files.netlify.com.