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.