QFile Accept Inconsistency

[FrederickGeek8]

Describe the bug
When specifying an accept= parameter on QFile, the selectable files vs the files that are accepted by the component are different. In particular, they are inconsistent with a vanilla HTML <input type='file' /> tag.

While I am able to select a certain file type (which happens to have a blank mime-type according to Javascript's File, though I'm not sure if that is related), the file does not appear in the QFile component after it is selected.

Codepen/jsFiddle/Codesandbox (required)
https://codepen.io/FrederickGeek8/pen/XWMMYLa

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codepen.io/FrederickGeek8/pen/XWMMYLa
2. Click on the Quasar "Attach a File"
3. Select a text file with a non-standard extension (e.g. `.bib)
4. See the lack of feedback from the element (in the form of the filename)

Expected behavior

1. Go to https://codepen.io/FrederickGeek8/pen/XWMMYLa
2. Click on the vanilla HTML "Choose File"
3. Select a text file with a non-standard extension (e.g. `.bib)
4. See the filename feedback from the HTML element.

Screenshots

Platform (please complete the following information):
Quasar Version: v1.15.16, v1.14.0
@quasar/app Version: v2.2.6, v2.1.0
Quasar mode:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS: macOS 11.3 & Codepen
Node: v12.19.0 & Codepen
NPM: 7.14.0 & Codepen
Yarn: N/A
Browsers: Google Chrome Version 90.0.4430.212 (Official Build) (x86_64)
iOS: N/A
Android: N/A
Electron: N/A

Additional context
You can download a test file here: https://gist.github.com/FrederickGeek8/f9cf79e2005af0a7eee8e03ec68b17ba

[yusufkandemir]

You can't see the filename appear, because the selected file's type is not compatible with the accept prop, the component is simply not updating the model because the file didn't pass the validation. You can see the same thing happening if you select different file types too(e.g. images, videos, etc.) and not just .bib.

Please see the note on File.type docs, it says the mime detection is not really reliable. So, I would recommend not using the accept property in your case.

If what you want is to just give feedback when the file picking operation is not successful due to an invalid file type, you can listen to the rejected event to handle this case as you want. You can see an example in here in Quasar Docs.

[FrederickGeek8]

I am not reporting so much of an error as I can reporting an inconsistency. At least on Google Chrome, the .bib file passes the native accept validation, but not the Quasar implementation. To your point, at least on Google Chrome I cannot select other files because they don't pass the native browser validation which prevents me from selecting them in the first place.

A bit of an observation I just had after your comment: This issue appears to be browser-specific. As in, .bib file (which is text, though reports having a blank mimetype) is selectable in Google Chrome, however, is not selectable in Safari (which still reports it as a blank mimetype). Additionally, this does not appear to be an issue with blank mimetypes, as I can see in Google Chrome, files with a blank mimetype aren't always selectable, but only if they appear to be plain-text.

Perhaps Google Chrome utilizes the accept prop, but does a more advanced, external validation to determine the mimetype that is not passed to the type attribute on File.

Either way, doing manually validation on the type or name seems a bit weird and leads to inconsistencies (as seen here) between accept validation in native HTML and Quasar. Depending on how much trouble it is, it might make sense to try ant utilize the native validation instead of using custom validation.

Additionally, it appears to me that the :filter custom validation is run after the Quasar validation instead of replacing it. One solution to this issue is to have the filter validation replace the Quasar validation, so that more advanced validation can be performed by the developer. It might also make sense to make it clear in the documentation that the native accept validation is not utilized.

[yusufkandemir]

The accept attribute doesn't validate the types of the selected files; it provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

Because of this, you should make sure that expected requirement is validated server-side.

HTML attribute: accept

I want to make it clear that, Chrome doesn't block you from selecting any file, it's just guiding you to the related files for convenience, you can still select 'all files' from the type dropdown. It's clearly stated above. And I know that it might be confusing how browsers are handling this but this is the way they are doing it, and they do not agree on the way they are doing it, so that is why we are trying to unify that.

It might make sense to try ant utilize the native validation instead of using custom validation.

Actually, you are proposing to be inconsistent and depend on the browser implementation rather than unifying the behavior across different browsers and platforms. One of the reasons this component exists is handling all of these and unifying the behavior.

If you were saying that the file was passing on QFile but not on QUploader, then we would try to solve that because that would be an inconsistency between our components that can be used for similar/shared purposes, and it would be confusing.

Additionally, it appears to me that the :filter custom validation is run after the Quasar validation instead of replacing it. One solution to this issue is to have the filter validation replace the Quasar validation, so that more advanced validation can be performed by the developer.

Yes, the custom filter is run after predefined filters(accept, size, etc.). Replacing all of them is not a really good idea since some people might want to just add custom filters and not get rid of them. What you can do here is to make a feature request, which allows disabling all/some of the predefined filters.

It might also make sense to make it clear in the documentation that the native accept validation is not utilized.

There is no such thing as native accept validation, there is just guidance towards selecting the correct files, as mentioned at the top.

Please let me know if there is any other thing I can help with.

[yusufkandemir]

Also, one good thing to do might be to allow files that have an empty type(i.e. if the file type cannot be recognized by the browser) in the accept filter. Please let me know what you think.