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