React FilePond Show Image Preview Before Upload Tutorial

In this tutorial, we will learn how to show image preview after the image is selected from the system’s local disk in React application using the FilePond and FilePond image preview modules.

Image previews show you what file you have chosen to upload, and this feature is an add-on to the React file upload functionally.

To show you uploaded image in React, we will use the FilePond module; FilePond is a popular library used primarily for obtaining a smooth file uploading experience. We will take the help of this library to preview an image on file upload in React.

There are plenty of packages available to build the image upload and preview in React. However, we chose FilePond, and we chose this package mainly due to flexible integration, additional support for other file upload-related tasks.

How to Show Image File Preview Before Upload in React using FilePond

• Step 1: Build React Project
• Step 2: Install React FilePond Module
• Step 3: Install FilePond Image Preview
• Step 4: Show Image Preview in React
• Step 5: Update Global App Js
• Step 6: View App in Browser

Build React Project

In this step, we will open the terminal, then use the create-react-app tool to create a new React project.

npx create-react-app react-webb

Make sure to get inside the app directory.

cd react-webb

Install React FilePond Module

In this step, we will use the following commands altogether to add the filepond and react-filepond modules in React app.

npm install filepond react-filepond

Install FilePond Image Preview

In this step, we will install the additional dependency to make the image preview work in React with FilePond.

npm install filepond-plugin-image-preview

Show Image Preview in React

In this step, we will create an image upload component, after all react is all about component. A component is a simple function that is used to break down large logic into smaller pieces.

Therefore, create a components/ folder, in this folder create a file name it ImageUpload.js.

You have to insert the provided code into the ImageUpload.js 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)

function ImageUpload() {
  const [files, initFiles] = useState([])

  return (
    <div className="container mt-5">
      <h2 className="mb-4">React FilePond Image Preview Example</h2>

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

export default ImageUpload

Update Global App Js

In this step, we will show you how to register a component and make it available globally in React app.

The process is simple just open the src/App.js file and import and declare the component in this file..

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

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

export default App;

View App in Browser

In the final step, we will start the React app. To run the react app, you have to invoke the single command which is mentioned below.

npm start

You have to use the following url to open the app, keep some images on your system and upload to check the image preview.

http://localhost:3000

Conclusion

Throughout this tutorial, we have explained in detail how to create a file uploading component.

Not just that, we have also described how to use additional FilePond dependencies to create image preview and file upload component in React js application.

We hope you have assimilated everything taught in this tutorial, and we are pretty much sure that this guide will definitely help you learn React profoundly.