React 18 File Type Validation using FilePond Module Tutorial

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

In this tutorial, you will learn how to implement file-type validation in React application’s file upload component.

You will be creating a file uploading component using the FilePond library.

Most importantly, you will understand how to implement file validation using the FilePond validate file dependency.

FilePond is a super powerful JavaScript library that helps you create a velvety smooth drag n’ drop file uploading component in React.

As well as, also supports file uploading in all JavaScript-based applications.

To add the File type validation in React js, you will be using the filepond-plugin-file-validate-type plugin.

The file type validation plugin refrains uploading the files with the wrong file types.

This plugin is combined with the FilePond instance, and it is invoked by defining inside the registerPlugin() method.

To enable the File validation in React, you have to set the allowFileTypeValidation to true and define the accepted file types in the acceptedFileTypes property.

In this quick guide, we will help you understand how to install, set up, and extend FilePond functionality with additional dependencies.

How to Implement File Type Validation in React File Upload Component

• Step 1: Create React App
• Step 2: Install React FilePond Package
• Step 3: Install FilePond File Validation Module
• Step 4: Add File Type Validation
• Step 5: Register Component in App Js
• Step 6: Run App Server

Create React App

You will start with installing a brand new React app.

You have to paste the given command on the terminal and execute the command to create the React app.

npx create-react-app react-world

Next, move into the project folder.

cd react-world

Install React FilePond Package

In this step, you will have to add the React file pond package, make sure to execute the given command.

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

Install FilePond File Validation Module

Additionally, we require to install the file type validation module, use the following command.

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

Add File Type Validation in React

One of the best reasons to use React for its component system, a component is a function that holds the code for a specific feature.

Now, make a components/ directory, also create the FileUploadValidate.js file.

Once the file and folder are created, insert the provided code into the newly generated 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 FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
registerPlugin(FilePondPluginFileValidateType, FilePondPluginImagePreview)

export default function FileUploadValidate() {
  const [files, setFiles] = useState([])

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

      <FilePond
        files={files}
        allowFileTypeValidation={true}
        acceptedFileTypes={['image/png', 'image/jpeg']}
      />
    </div>
  )
}

Register Component in App Js

In this step, you are going to import the FileUploadValidate component in src/App.js file.

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

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

Run App Server

Let us start the react application, you may run the app using the following command.

npm start

Open the browser, type the given url on the address bar and hit enter to view the app.

http://localhost:3000

Conclusion

In this step-by-step guide, we diligently shed light on working with the file pond module.

We learned how to create a file uploading component using the file pond package.

Not just that, we also learned how to integrate file type validation for the files we upload through the file upload component.

We created a basic react app and imported the file pond plugin and image preview and file validation dependency using the node package manager.

We have seen how to incorporate the properties in the FilePond component that invokes the file validation in React file upload module.