deCODE - Our Newsletter for Jan 2022 is available for Download. 🗞   🥳
  Signup/Sign In

How to limit file upload to be only images in HTML?

We can upload text, images, videos in HTML. But there are situations where we need to upload only images. We can limit the file upload to images only in HTML.

To do this we need to use the HTML accept attribute.

HTML accept attribute

The HTML accept attribute specifies the type of input file that a server can accept. This attribute can only be used with the <input> element with <input type="file">.

This attribute is not used as a validation tool. So the uploaded file should be validated along the server-side.

Limit the file upload to be only images

To limit the file uploaded to be only images use accept="image/*" attribute. See the below example.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>HTML </title>    
</head>
<body>
    <h2> select only image </h2>
    <form action="/form/submit" method="post">
      <input type="file" name="Image" accept="image/*">
      <input type="submit">
    </form>
</body>
</html>

Output

Here is the output of the above program.

limit file upload to be images

Conclusion

The image/* value accepts only the images with any format like .jpeg, png, jpg, etc. We can add the accept attribute with the image/* attribute to limit the file upload to only images.