Inconsistent/wrong file type error messages in web uploader

The web uploader thinks that any file with MIME type image/* is acceptable, but that is not actually true and it’s causing some issues. (Discussion below focuses on images, though some of it applies to audio files as well.)

When the web uploader fails, there are 3 possible outcomes:

  • A popup tells you the failing file and the reason(s) for failure, e.g.

image

  • A popup tells you the failing file, but no reason is given

image

  • A card is created, but the thumbnail shows an exclamation point

image

Ideally all files of unsupported types would cause the first kind of popup with the file type error message. Instead, files without a MIME type – which surprisingly includes heic/heif on some platforms – will give the error popup, but fail to tell you the reason, as in the second screenshot above. And files with MIME type image/* that are not jpg/png/gif and that are not oversized will create ! cards, like the small svg.

Then, because there is a separate check for WHICH error message to display, oversized images of the same types that create ! cards DO show the file type error:

image

In summary: large unsupported images will correctly show the file type error, small unsupported images will create ! cards, and unknown MIME types won’t give details of their error.

Compounding the issue is that MIME types are not consistent across platforms.

I tested 12 files types, in small and large sizes, across 3 operating systems and 4 browsers, and while most things stayed the same, there were definitely differences. For example, I successfully uploaded a .jfif image on all but one platform – Safari on macOS did not recognize the MIME type and gave the message “There were some problems with these files”. And as mentioned above, heic/heif files failed with no message on some platforms, while on others they created ! cards.

Because the MIME type also feeds into the file chooser, different platforms will also display different file extensions in the file chooser.

Chrome/Windows:

Firefox/Windows:

Note that while the lists are different, they are both wrong/misleading in the sense that they show unsupported file types.

I think if you want to be really clear about what file types are supported, you need to use file extensions instead of MIME types. Another option (that doesn’t require as many changes to the code) is to treat image MIME types the way audio MIME types are treated: list each acceptable type.

image

So image/jpeg, image/png, and image/gif instead of image/*.
Depending on which route you go, the error message checker may also need some tweaks to make sure all unsupported files give the file type error message.

5 Likes

Made a github issue here: https://github.com/inaturalist/inaturalist/issues/3472

1 Like

This is fixed now.

1 Like