React Js File Upload with File Preview using FilePond Tutorial

File uploading is one of the core feature of any web application. It allows users to choose the images or files from the system’s local disk and load them onto the server.

Today, with the help of this comprehensive post, we will teach you how to build a file uploading component in React application from scratch.

Moreover, we will also explain how to add image preview functionality in React image uploading component using the FilePond library.

Image preview is an essential feature that gives a brief idea about what information your thumbnail for the image file contains. It is generally a scaled-down version of the actual image.

After completing this tutorial, you will have an utter idea about using the file pond package to build the file uploading component in React. Not only but also know how to preview images before uploading to the server in React.

How to Create Image Upload and Image Preview Component in React

  • Step 1: Install React Application
  • Step 2: Add FilePond Dependencies
  • Step 3: Create Component File
  • Step 4: Build File Upload Component
  • Step 5: Add Component in App
  • Step 6: Run React Application

Install React Application

Head over to command prompt of the terminal type the command and hit enter to create a basic react app.

npx create-react-app react-amp

Move towards the project root.

cd react-amp

Add FilePond Dependencies

Now, you have to install the react file pond or image preview dependencies; these modules allow you to build the image preview component.

npm install filepond react-filepond filepond-plugin-image-preview

Create Component File

We need a separate file it is usually call component in react, so make the components/ directory.

Next, you have to make a new file name it FileUpload.js.

import React from 'react'

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

Build File Upload Component

Open the FileUpload.js file and add the suggested code in the file.

import React, { useState } from 'react'

import { FilePond, registerPlugin } from 'react-filepond'

import FilePondPluginImagePreview from 'filepond-plugin-image-preview'

import 'filepond/dist/filepond.min.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'

registerPlugin(FilePondPluginImagePreview)


export default function FileUpload() {
  const [files, setFiles] = useState([])

  return (
    <div>
      <h2 className="mb-3">React File Upload and Image Preview Example</h2>

      <FilePond files={files} />
    </div>
  )
}

Add Component in App

Next, you require to open the App.js file, inside this file you have to import the component that you have to invoke when the app loads.

Make sure to add the provided code in app file.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'

import FileUpload from './components/FileUpload'

export default function App() {
  return (
    <div className="container mt-3">
      <FileUpload />
    </div>
  )
}

Run React Application

Again, type the following command on the terminal and hit enter.

npm start

You can see the app on the browser using below link.

http://localhost:3000

React Js File Upload with File Preview using FilePond Tutorial

Summary

We used a function component to build the image upload component. To make the component, you needed to use FilePond, register plugin, and file pond plugin image preview modules.

It is a simple and straightforward process; we hope you have assimilated everything by now.