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.
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
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
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
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.
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;
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
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.
In this post, we will learn how to work with HTTP requests in the Redux…
MySQL is a relational database management system based on SQL – Structured Query Language, and…
React Js Handle Rest API data globally with Context and useState hook tutorial. In this…
Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…
In this tutorial, you will discover how to import CSV file into MySQL database using…
React Js Global state management with createContext hook example; In this tutorial, we will help…