How to Add File Size Validation in React 18 with FilePond

Last Updated on March 4, 2024 by Digamber in React JS

In this step by step tutorial, we will help you learn how to integrate the file size validation in React filepond image or file upload component.

You will be creating the file upload component and implementing the file size validation simultaneously in React.

File size validation is a type of validation that sets the minimum and maximum file size limit to the file we want to upload.

We are using the profound filepond-plugin-file-validate-size package to build this feature, which is the additional dependency of react file pond package.

Check out the properties of the file size validation module:

allowFileSizeValidation: Enable or disable file size validation.

minFileSize: The minimum size of a file, for example, 5MB or 750KB

maxFileSize: The maximum size of a file, for example, 5MB or 750KB

maxTotalFileSize: Maximum size of all files in the list, same format as

labelMaxFileSizeExceeded: Status message shown when a large file is dropped.

labelMaxFileSize: Detail message shown when max file size was exceeded. {filesize} is replaced with the value of the maxFileSize property.

labelMaxTotalFileSizeExceeded: Status message shown when the total file size exceeds the maximum.

labelMaxTotalFileSize: Detail message shown when the total file size exceeds the maximum.

React Implement File Size Validation using FilePond Example

• Step 1: Install React Project
• Step 2: Add React FilePond Module
• Step 3: Add File Size Validation Module
• Step 4: Create File Upload Component
• Step 5: Add FileUpload in App Js
• Step 6: Run Development Server

Install React Project

In order to begin coding, you must have node, npm or a blank app set up on your system.

If somehow you haven’t created the app yet, go ahead and execute the following command to manifest a new React app on your system.

npx create-react-app react-upload

Right after that, head over to project folder.

cd react-upload

Add React FilePond Module

The second most important thing is to install the FilePond library in your React project.

Now, install the package only using the below single command.

npm install filepond react-filepond --legacy-peer-deps

Add File Size Validation Module

File size validation doesn’t come by default with FilePond; therefore, you have to install the required dependency using the following command.

npm install filepond-plugin-file-validate-type --legacy-peer-deps

Create File Upload Component

We have now prepared the environment to form a new file upload component, now we need to create a locust where we can keep the react components.

Hence, create a components/ folder, inside the folder, create a new FileSizeValidate.js file.

import React, { useState } from 'react'

import { FilePond, registerPlugin } from 'react-filepond'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import 'filepond/dist/filepond.min.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'

import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
registerPlugin(FilePondPluginFileValidateSize, FilePondPluginImagePreview)

export default function FileSizeValidate() {
  const [files, initFiles] = useState([])

  return (
    <div className="container mt-5">
      <h2 className="mb-4">React File Upload Size Validation Example</h2>

      <FilePond
        files={files}
        allowFileSizeValidation={true}
        maxFileSize={5}
        labelMaxFileSizeExceeded={'File is too large'}
      />
    </div>
  )
}

Add FileUpload in App Js

The app js component or a function is the file that serves all the components in React DOM.

Therefore all the components need to be registered in src/App.js file.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import FileSizeValidate from './components/FileSizeValidate'

export default function App() {
  return (
    <div>
      <FileSizeValidate />
    </div>
  )
}

Run Development Server

This is the last step of this tutorial, and this will guide you on starting the React development server.

And, here is the command that will help you start the app and view it on the browser.

npm start

We are setting the file size limitation upto 5MB, and we are trying to upload the larger file.

File component will throw the error that you can see on your browser’s screen, like mentioned below.

Conclusion

In this tutorial, we have learned how to set the file size limitation in React app.

We have taken the pragmatic approach to identify the simple and best way to use file size validation dependency of the FilePond module.

We shed light on some of the file size validation plugin properties, such as allowFileSizeValidation, maxFileSize, and labelMaxFileSizeExceeded.

This is just the simple guide that makes you aware of the nitty-gritty of using FilePond in React to build a better file upload component.

However, file size validation is not limited to this point, and you may further use the plugin to extend the file size limitation in React js application.