How to accept only image files in react file upload

In this tutorial, you will learn how you can create a React file upload component that accepts only image files.

This tutorial is a continuation of my previous blog on creating a react file upload component.

To allow the browser to accept only images of specific format, we will update the input element of type="file" by adding a new attribute accept, which takes file format.

Replace the existing input of type file with the below one

  //accepts only png and jpg images
  <input type="file" accept="image/png, image/jpeg" onChange={handleFileSelect}/>
  
  //or, accepts images of all formats
  <input type="file" accept="image/*" onChange={handleFileSelect}/>

This helps browsers to add validation when selecting files on the popup window. Only image files of specific formats will be enabled for selection, others will be disabled.

Example

Related Solutions

• How to upload files in React using Axios

• How to get the size of a file in React

• How to submit a login form in React using React hook

• How to set HTTP headers in Axios