How to accept only image files in react file upload

#react

Last updated on Aug 2, 2022 by Suraj Sharma



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


Rate this post


Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.