How to Implement Image Cropping in React 18 with FilePond

Last Updated on by in React JS

FilePond has made file uploading very easy. With FilePond, you can not just build a file uploading feature.

But also add multiple other features such as image cropping, image transforming, adding metadata to an image file.

In this extensive tutorial, we will teach you how to create image cropping functionality in React app using the FilePond.

To add image cropping, we will need to use additional filepond-plugin-image-crop and filepond-plugin-image-transform packages.

We will walk you through every step and give you the more precious idea of integrating image cropping in React with FilePond packages.

The Image crop plugin automatically estimates and adds cropping details based on the input image dimensions and the set crop ratio.

The Image preview library utilizes these details to exhibit the accurate preview.

The Image transform package uses this information to convert the image before uploading it to the server.

We will also add an image preview while uploading the file to the server. Every extra feature requires FilePond’s other dependencies to be added in React.

React Js FilePond Image Upload and Image Crop Example

  • Step 1: Install React Application
  • Step 2: Add FilePond in React
  • Step 3: Install FilePond Dependencies
  • Step 4: Build Image Cropping Feature
  • Step 5: Update Main App File
  • Step 6: Run App Server

Install React Application

To give you the proper idea how to properly implement FilePond in React, we will start from absolute scratch.

Open the console, type the command and press enter to install a new React project.

npx create-react-app react-blog

Next, after the app is created, move into the app’s root.

cd react-blog

Install FilePond Library

Now, project is ready. The first thing we have to do after the project is ready. Install the React file pond adaptor.

Here is how you can install it with just single command.

npm install filepond react-filepond --legacy-peer-deps

Install FilePond Dependencies

There are other dependencies also required for making the file crop feature in React.

Let us add filepond-plugin-image-crop filepond-plugin-image-exif-orientation filepond-plugin-image-preview and filepond-plugin-image-transform packages.

npm install filepond-plugin-image-crop filepond-plugin-image-exif-orientation filepond-plugin-image-preview filepond-plugin-image-transform --legacy-peer-deps

Build Image Cropping Feature

Let us create the components/ directory in your project’s root folder, also create a FileUploadPond.js file.

There after insert the following code into the file.

import React, { useState } from 'react'

import { FilePond, registerPlugin } from 'react-filepond'
import 'filepond/dist/filepond.min.css'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
import FilePondPluginImageCrop from 'filepond-plugin-image-crop' // Crops image
import FilePondPluginImageTransform from 'filepond-plugin-image-transform' // Changes image to match crop

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

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


export default FileUploadPond

Import the FilePond and registerPlugin modules at the top part of the file.

To add the image crop feature, must import FilePondPluginImageCrop and FilePondPluginImageTransform packages.

In the FilePond directive, add allowImageCrop property and set to true, again set allowImageTransform and imageCropAspectRatio properties.

Update Main App File

Now, you are ready to inject the FilePond component in the src/App.js file, and this is essential because the App file is the primary component of React.

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

function App() {
  return (
      <FileUploadPond />

export default App;

View App in Browser

To check how does the crop functionality work, make sure to run the application server.

Again, head over to terminal’s console write following command. Ultimately, execute the command to start it on the browser.

npm start

If you are building locally, you may use the given url.


How to Implement Image Cropping in React with FilePond


In this file pond image crop example, we explained how to create a simple file uploading component and managed to set the image crop ratio using filepond dependencies.