OverviewOfficial Website

React FilePond is a handy wrapper component for FilePond, a JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

CSS

<!-- Filepond css -->
// Import FilePond styles
import 'filepond/dist/filepond.min.css';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

Import Package

<!-- filepond -->
import { FilePond,  registerPlugin } from 'react-filepond';

Add Package

yarn add react-filepond --save

Remove Package

yarn remove react-filepond or you can remove package by removing specific package from package.json

const [files, setFiles] = useState([]);
<FilePond
files={files}
onupdatefiles={setFiles}
allowMultiple={true}
maxFiles={3}
name="files"
className="filepond filepond-input-multiple"
/>