React Tutorials

How to Add File Size Validation in React with FilePond

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

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

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.

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…

24 hours 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…

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