React Js Build File Upload Component with FilePond Tutorial

In this step-by-step guide, we will show you how to create a drag and drop file or image uploading and image preview component in React using FilePond, FilePondPluginImageExifOrientation, and FilePondPluginImagePreview libraries.

FilePond is a handy JavaScript library that makes file uploading utterly effortless.

For React environment, FilePond offers a handy wrapper component. It is basically a JavaScript library that uploads everything that comes across its path.

Not just that, it gives the great silky smooth user experience by promising image optimization for faster uploads in React.

In this quick tutorial, we will start with creating a new app, configure file pond plugin, make a specific drag and drop image uploading component and eventually show you the progress on the browser.

How to Create Drag and Drop File Upload Component in React using FilePond

• Step 1: Download Basic React Project
• Step 2: Install React FilePond Package
• Step 3: Make New Component
• Step 4: Build Drag and Drop File Upload Component
• Step 5: Inject File Upload Component in App
• Step 6: View App in Browser

Download Basic React Project

Not yet created the project, don’t worry here is how you can create your first react project.

On your terminal’s console, add the following command and hit enter. BTW, we assume you have already installed node and npm tools.

npx create-react-app react-proxima

A new blank react app is ready to be developed, just cd into the project.

cd react-proxima

Install React FilePond Package

In order to work with FilePond, it needs to be added to React project. We will altogether install filepond and react-filepond packages.

npm install filepond react-filepond

To create the image preview feature while file is uploading, also install the following packages.

npm install filepond-plugin-image-exif-orientation filepond-plugin-image-preview

Install FilePond Image Preview Package

To enable the image preview for file pond, we have to import the Image EXIF Orientation and Image Preview plugins altogether.

npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation

Make New Component

Let us create the components/ directory in your project’s root folder, you also need to create a FilePondUpload.js file.

To set up the functional component you have to add the following code in the file.

import React from 'react'

export default function FilePondUpload() {
  return (
    <div>
      
    </div>
  )
}

Build Drag and Drop File Upload Component

First, import the React FilePond and registerPlugin modules. File pond comes with its own styling; to enable that, you have to import the CSS of respective modules.

The registerPlugin() method is used to invoke the file pond image preview CSS, also install and import it.

Set the useState lifecycle hook to initialize the files state. Define the FilePond directive and pass the given properties into it; you can pass your own API or server URL where you store the uploaded image.

import React, { useState } from "react";

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

// 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";

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


function FilePondUpload() {
  const [files, setFiles] = useState([]);
  
    return (
      <div className="container mt-4">
        <h2 className="mb-3">React FilePond File Upload Example</h2>

        <FilePond
          allowMultiple={true}
          files={files}
          maxFiles={5}
          allowReorder={true}
          server="" // File upload api goes here
        />
      </div>
    )
}

export default FilePondUpload

Inject File Upload Component in App

Since the App component is the significant component in React application, it works as a container for all other components.

You have to open the src/App.js file and import the FilePondUpload component here.

import React from 'react'
import FilePondUpload from './components/FilePondUpload.js'
import 'bootstrap/dist/css/bootstrap.min.css'


function App() {
  return (
    <div>
      <FilePondUpload />
    </div>
  )
}

export default App;

View App in Browser

Now, you must be waiting to see the results on the browser. In order to view the app, you first run the development server.

npm start

Copy the given url and add it on the browser’s address bar and hit enter.

http://localhost:3000

Conclusion

We have successfully built the image uploading component in React with file drag and drop support. However, this is just the beginning. It comprises various other features that you can use to enhance the feature of React file uploading functionality.

Here are the core features of FilePond:

• Accepts directories, files, blobs, local URLs, remote URLs, and Data URIs.
• Drop files, select on the filesystem, copy and paste files, or add files using the API.
• Async uploading with AJAX, or encode files as base64 data and send along form post.
• Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
• Image optimization, automatic image resizing, cropping and fixes EXIF orientation.
• Responsive, automatically scales to available space, is functional on both mobile and desktop devices.

For making the additional features work, make sure to add some other dependencies with FilePond.