React JS Tutorial- How To Build File Upload Component With FilePond Example

React JS Tutorial- Learn To Build File Upload Component With FilePond Example

In this React Js tutorial, we will learn how to create a drag and drop file or image uploading and image preview component in React using FilePond, FilePondPluginImageExifOrientation and FilePondPluginImagePreview libraries.

If you are a React app developer, then it must be already known to you that FilePond offers a handy wrapper component. It is a JavaScript library that uploads everything that comes across its path.

In addition, it offers quite an easy and promising image optimization for faster uploads in React.

 

How To Create Drag And Drop File Upload Component In React Using FilePond

Step 1- Download New React Project

Step 2- Install React FilePond Package

Step 3- Install FilePond Image Preview Package

Step 4- Make New Component

Step 5- Build Drag And Drop File Upload Component

Step 6- Inject File Upload Component In App

Step 7- View App In Browser

 

Let’s learn in detail now:

Step 1- Download New React Project

The first step is just to install or download a new React project by opening the terminal where we type the below command. However, do remember to install node and npm tools already in the system:

npx create-react-app react-proxima

 

Further, we just have to cd into the project:

cd react-proxima

 

Step 2- Install React FilePond Module

Afterward, we will be adding the filepond and react-filepond modules in React app using the following command:

npm install filepond react-filepond

 

In order to create the image preview feature while the file is uploading, we have to install the following packages as well:

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

Step 3- Install FilePond Image Preview Package

Here, in this step, we have to import the Image EXIF Orientation and Image Preview plugins to enable the image preview for filepond:

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

Step 4- Make New Component

Afterward, we will be creating a components/ directory in our project’s root folder. We also need to create a FilePondUpload.js file.

Further, we have to insert the below code into the file:

import React from 'react'
export default function FilePondUpload() {
  return (
    <div>
      
    </div>
  )
}

Step 5- Build Drag And Drop File Upload Component

This step is about importing FilePond and registerPlugin modules. FilePond comes with its own styling option. For enabling it, we have to import the CSS of the respective modules.

The registerPlugin() method is used to invoke the file pond image preview CSS after which we have to install and import it as well.

 

Then, we set the useState lifecycle hook to initialize the file’s state. We define the FilePond directive and pass the given properties into it. We can pass our own API or server URL where we 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

 

Step 6- Inject File Upload Component In App

Now, in this step, we will open the src/App.js file and import the FilePond component here.

We know already that the App component is an important one in React app development. Let’s see below how to register this component using the below command:

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;

Step 7- View App In Browser

Since we have reached the end of this tutorial, we need to run the application server.

Now, we head over to the terminal’s console and use the following command:

npm start

 

Conclusion

In this React tutorial, we have learned how to build the image uploading component in React with file drag and drop support.

In addition, there are also many other features of FilePond as :

• Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
• Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
• Responsive, automatically scales to available space, is functional on both mobile and desktop services.

 

Hope that you have very well understood the steps to be followed.

 

Thanks