React Tutorial- How To Implement Image Cropping In React With FilePond

How To Implement Image Cropping 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.

So, in this tutorial, we will get to learn how to create image cropping functionality in the React app using the FilePond. For adding the image cropping, we will have to use additional filepond-plugin-image-crop and filepond-image-transform packages.

 

We will be knowing how to integrate 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.

 

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- View App In Browser

 

Let’s learn in detail now:

Step 1- Install React App

The first step is just to install or download a new React project by opening the console where we type the below command:

npx create-react-app react-blog

 

Further, we have to move into the app’s root after the app is created:

cd react-blog

 

Step 2- Install FilePond Library

Afterward, we will be installing the React FilePond adaptor.

See below to know how to install it by using the following command:

npm install filepond react-filepond

 

Step 3- Install FilePond Dependencies

Some other dependencies are required in order to make the file crop feature in React.

Hence, we need to 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

 

Step 4- Build Image Cropping Feature

In this step, we will create the components/ directory in our project’s root folder. Then, we create a FileUploadPond.js file.

Further, we have to insert the below 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
registerPlugin(
  FilePondPluginImagePreview,
  FilePondPluginImageCrop,
  FilePondPluginImageTransform,
)
function FileUploadPond() {
  const [files, initFiles] = useState([])
  return (
    <div className="container mt-5">
      <h2 className="mb-3">React FilePond Image Crop Example</h2>
      <FilePond
        files={files}
        allowImageCrop={true}
        allowImageTransform={true}
        imageCropAspectRatio={'1:1'}
      />
    </div>
  )
}
export default FileUploadPond

 

Here, we import the FilePond and registerPlugin modules at the top part of the file. For adding the image crop feature, we must FilePondPluginImageCrop and FilePondPluginImageTransform packages.

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

 

Step 5- Update Main App File

Now, we are ready to inject the FilePond component in the src/App.js file. This is quite essential since 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 (
    <div>
      <FileUploadPond />
    </div>
  )
}
export default App;

 

Step 6- View App In Browser

Since we have reached the end of this tutorial, we need to check how does the crop functionality work. So, we will be running the application server.

Now, we head over to the terminal’s console and use the following command:

npm start

 

Conclusion

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

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

 

Thanks