How to allow <input type=“file”> to accept only .jpeg and .jpg files?

Question

In my Angular 11 project, I have an image uploader component which uses <input type="file"> to accept an image and send it to server. This image uploader is supposed to only accept jpg and jpeg formats.

When I add the accept attribute to my input like so:

      <input
        type="file"
        accept="image/png"
      />

My system opens files with the correct showing format, like this:

Which is correct. It's showing the user that it only accepts .png image.

But when I change the accept attribute in my input to this:

      <input
        type="file"
        accept="image/jpg, image/jpeg"
      />

It no longer shows user which format they should be using, as you can see:

It just says custom files on my ubuntu and I'm guessing all files in windows. Which is not what I want. The user should be able to see that they're only allowed to add jpg or jpeg files here. something like *.jpg or *jpeg.

Is there a way to fix this?

Borneo

To my knowledge that is not possible, since that is the remit of ubuntu to handle, not your application. FYI, there is no image/jpg MIME type, only image/jpeg. – Sofa

Have a look here #3829054 – Blat

Answer 1

try changing it to either accept="image/jpeg" or accept=".jpg, .jpeg"

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

Cabriole

Answer 2

Change it to something like

<input type="file" accept=".jpg,.jpeg" />

Morry