react-filepond

To implement FilePond in a functional component using Hooks, follow these steps:

1. Import FilePond and registerPlugin from react-filepond.
2. Import the core FilePond CSS: filepond/dist/filepond.min.css.
3. (Optional) Install and import FilePond plugins (e.g., filepond-plugin-image-preview) along with their respective CSS.
4. Use registerPlugin to activate the plugins.
5. Use the <FilePond /> component, managing the file state via onupdatefiles.

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

// Import React FilePond
import { FilePond, registerPlugin } from 'react-filepond'

// Import FilePond styles
import 'filepond/dist/filepond.min.css'

// Import the Image EXIF Orientation and Image Preview plugins
// Note: These need to be installed separately
// `npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save`
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'

// Register the plugins
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview)

// Our app
function App() {
  const [files, setFiles] = useState([])
  return (
    <div className="App">
      <FilePond
        files={files}
        onupdatefiles={setFiles}
        allowMultiple={true}
        maxFiles={3}
        server="/api"
        name="files" /* sets the file input name, it's filepond by default */
        labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
      />
    </div>
  )
}

To implement FilePond in a class component, use a ref to access the FilePond instance and manage file state within this.state. Use the oninit prop to handle initialization and onupdatefiles to sync the component state with the current file list.

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

// Import React FilePond
import { FilePond, registerPlugin } from "react-filepond";

// Import FilePond styles
import "filepond/dist/filepond.min.css";

// Import the Image EXIF Orientation and Image Preview plugins
// Note: These need to be installed separately
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";

// Register the plugins
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

// Our app
class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // Set initial files, type 'local' means this is a file
      // that has already been uploaded to the server (see docs)
      files: [
        {
          source: "index.html",
          options: {
            type: "local"
          }
        }
      ]
    };
  }

  handleInit() {
    console.log("FilePond instance has initialised", this.pond);
  }

  render() {
    return (
      <div className="App">
        <FilePond
          ref={ref => (this.pond = ref)}
          files={this.state.files}
          allowMultiple={true}
          allowReorder={true}
          maxFiles={3}
          server="/api"
          name="files" /* sets the file input name, it's filepond by default */
          oninit={() => this.handleInit()}
          onupdatefiles={fileItems => {
            // Set currently active file objects to this.state
            this.setState({
              files: fileItems.map(fileItem => fileItem.file)
            });
          }}
        />
      </div>
    );
  }
}

The <FilePond /> component accepts several props to control its behavior:

• files: An array of files to display in the component.
• onupdatefiles: Callback function triggered when the file list changes. In functional components, this can be used to update state directly. In class components, it is typically used to map fileItems back to the state.
• allowMultiple: Boolean indicating if multiple files can be selected.
• maxFiles: The maximum number of files allowed.
• server: The server endpoint URL for async uploading (e.g., "/api").
• name: The name of the file input (defaults to "filepond").
• labelIdle: The label displayed when no files are present. Supports HTML for custom styling (e.g., labelIdle='Drag & Drop or <span class="filepond--label-action">Browse</span>').
• allowReorder: Boolean indicating if files can be reordered.
• oninit: Callback function triggered when the FilePond instance is initialized.
• ref: Used to access the underlying FilePond instance.