React Tutorial- How To Show Image Preview Before Upload With FilePond

How To Show Image Preview In React With FilePond

React provided with FilePond makes the file uploading quite smooth. With FilePond, we can easily add multiple features such as image cropping, image transforming, adding metadata to an image file also.

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

In this tutorial, we will get to 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.

 

There are many packages available to build the image upload and preview in React. However, we have chosen FilePond which is known for its flexibility, integration, additional support for other file upload-related tasks.

 

How To Show Image File Preview Before Upload In React Using FilePond Example

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

 

Let’s learn in detail now:

Step 1- Build 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:

npx create-react-app react-webb

 

Further, we have to move into the app directory after the app is created:

cd react-webb

 

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

 

Step 3- Install FilePond Image Preview

Here, in this step, we have to install the additional dependency to make the image preview in work in React with FilePond:

npm install filepond-plugin-image-preview

Step 4- Show Image Preview In React

Afterward, we will be creating an image upload component. This will help in breaking down the large functions into smaller pieces.

Hence, we create a components/ folder. In this folder, we have to create a file name as ImageUpload.js.

Further, we have to insert the below code into 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)
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

 

Step 5- Update Global App Js

Now, in this step, we will learn how to register a component and make it available globally in React app.

For this, we will 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;

Step 6- 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 create a file uploading component.

We have also seen to use of additional FilePond dependencies to create image preview and file upload components in React js app.

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

 

Thanks