File size validation prevents users from uploading large size image files. Large files ideally eats up server bandwidth, and that is bad because it costs money.
Being a React developer, we more then often work with image files.
You probably build file upload components but do you know how to add file size validation in React?
If you don’t know, how to work with image upload component and validation. Fret not; we can tell you how to incorporate file size validation in React smoothly.
To refrain from such a problem, we will use the FilePond plugin to limit the image file size in React.
This quick tutorial will simplify everything from scratch, including setting up a new react app, adding additional dependencies, and building and registering the component in React realm.
How to Integrate File Size Validation in React File Upload Component
- Step 1: Download React Application
- Step 2: Install FilePond Packages
- Step 3: Build Validation Component
- Step 4: Update App.js
- Step 5: Test Application
Download React Application
In the first step we advice you to download the fresh react app.
npx create-react-app react-pub
If the app is already downloaded, then move into the app. Else, jump on to the subsequent step.
cd react-pub
Install FilePond Packages
In this step, we require to install the file pond package and additional file size validation dependencies.
Make sure to run the given commands from the terminal to install the packages.
npm install filepond react-filepond
npm install filepond-plugin-file-validate-type
Build Validation Component
Now, we need to formulate the new component where we can write the logic to make the file upload possible in React.
Let us create the components/ directory, and create the FileSizeUpload.js file.
After that, add the given code in the new component file.
import React, { useState } from 'react'
import { FilePond, registerPlugin } from 'react-filepond'
import 'filepond/dist/filepond.min.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
registerPlugin(FilePondPluginImagePreview, FilePondPluginFileValidateSize)
export default function FileSizeUpload() {
const [files, setFiles] = useState([])
return (
<div>
<h2 className="mb-5">React File Size Validation Example</h2>
<FilePond
files={files}
allowFileSizeValidation={true}
labelMaxFileSizeExceeded={'File size is large'}
maxFileSize={4}
/>
</div>
)
}
Update App.js
In React all the components are served through App component, to view the file upload component in browser you have to register the component in the App js.
Consequently, open the App.js and insert the given code into the file.
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import FileSizeUpload from './components/FileSizeUpload'
export default function App() {
return (
<div className="container mt-4">
<FileSizeUpload />
</div>
)
}
Test Application
Move on to the terminal, type the command and hit enter to invoke the react app.
npm start
You can use the given url if testing the app locally.
http://localhost:3000
If you upload a file with more than the four MB error message, the file size will be shown on the file upload component.
Summary
If you have followed every step, we are sure you can now create a file upload component but, most importantly, set the file size limitation in React.
We learned to use the file pond plugin and file size validation module.
Not just that, we explored how to use the methods and properties to add image size validation.