React Tutorials

How to Implement Image Cropping in React with FilePond

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

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

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
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

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 (
    <div>
      <FileUploadPond />
    </div>
  )
}

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.

http://localhost:3000

Conclusion

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.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Redux Handle API Calls with Thunk Middleware Tutorial

In this post, we will learn how to work with HTTP requests in the Redux…

1 day ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

4 days ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

1 week ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

1 week ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago

How to Handle Global State in React js using Context API

React Js Global state management with createContext hook example; In this tutorial, we will help…

2 weeks ago