How to Add File Type Validation in React using FilePond

Throughout this post, you will comprehend how to add file type validation in the React file upload component using the FilePond and filepond-plugin-file-validate-type packages from scratch.

A file type validation is added to the file upload component; ideally, this type of validation checks which type of file is chosen by the user before storing it on the server.

This guide will profoundly guide you on how to restrict users to upload only permitted file types.

There are many ways to incorporate file type validation in React; however, we chose the file pond plugin to accomplish this task.

You will be using the FilePond module and also the other dependency to implement the file type validation.

React File Type Validation with FilePond Example

  • Step 1: Download React Project
  • Step 2: Add FilePond Dependency
  • Step 3: Add File Type Validation Package
  • Step 4: Create File Upload Component
  • Step 5: Update App Js File
  • Step 6: View App in Browser

Download React Project

First thing first, open the terminal, on the console type provided command and hit enter.

npx create-react-app react-draft

After the new project is downloaded get inside the project folder.

cd react-draft

Add FilePond Dependency

Secondly you have to install file pond and react file pond packages in your react project.

npm install filepond react-filepond

Add File Type Validation Package

To inoculate file validation in react make sure to additionally add the given plugin.

npm install filepond-plugin-file-validate-type

Create File Upload Component

In this step, we will create the component for validation programme. So, create components/ folder, and make a new UploadFile.js file in the components folder.

import React, { useState } from 'react'

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

registerPlugin(FilePondPluginImagePreview, FilePondPluginFileValidateType)

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

  return (
    <div>
      <h2 className="mb-5">React File Validation Example</h2>

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

Import essential modules such as FilePond, registerPlugin, FilePondPluginImagePreview and most importantly FilePondPluginFileValidateType.

Define FilePond attribute in return method, which will invoke the file upload component in React.

You also have to declare the allowFileTypeValidation and acceptedFileTypes.

The acceptedFileTypes property takes an array in which you can pass the file extension that you allow for the files to be uploaded.

Update App Js File

Now we have to import the named module or component in the main App.js file, ensure that you also declared the component in the return method as given below.

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

export default function App() {
  return (
    <div className="container mt-3">
      <UploadFile />
    </div>
  )
}

View App in Browser

Next, we require to check the file validation hence we need to start the react app.

Here is the command that will help you start the react server.

npm start

After the app server is running open the given url on the browser.

http://localhost:3000

How to Add File Type Validation in React using FilePond

Summary

File type validation in React js tutorial is completed; in this step-by-step guide, we have learned how to create react file upload component and impose file type validation.

Up until now, we have explained how to invoke the file pond package in React to build the file type validation in React.

We believe this guide will assist you in making the file upload component in React.