如何允许<input type="“file”">只接受.jpeg 和.jpg 文件？

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?

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

Answer 2

Change it to something like

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