5

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:

open file in ubuntu

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:

open file in ubuntu

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?

Newsha Nik
  • 806
  • 2
  • 12
  • 29
  • 1
    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`. – RJM Mar 10 '21 at 13:33
  • 1
    Have a look here https://stackoverflow.com/questions/3828554/how-to-allow-input-type-file-to-accept-only-image-files/15857189 – Zam Abdul Vahid Mar 10 '21 at 13:35

2 Answers2

5

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

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

tcrite
  • 523
  • 2
  • 12
4

Change it to something like

<input type="file" accept=".jpg,.jpeg" />
Saptarshi
  • 136
  • 1
  • 2
  • 9