I want to filter files user can select into <input type='file'>
So I wrote :
<input class="form-control" accept="video/*" name="my_video" id="my_video" type="file"> for video
and <input class="form-control" accept="image/*" name="my_picture" id="my_picture" type="file"> for an image
I do tests with Linux browsers :
Firefox 53.0 (64 bits)
Chromium 58.0.3029.81 (64-bit)
both do not filter file types.
I looked around on stackoverflow. Syntax seems good. But even examples from that discussion does not work for me.
I checked on MDN as well. Nothing to help me.
I also tried to put directly file extension like accept="png" accept=".png", accept="*.png". With same result.
Does someone have a clue to make accept parameter work?
Code is too simple and it shows no error on Chrome.
But for cross-browser functionality you can use jquery code or Bootstrap File Input
Related
Here's a very weird bug that occurs in Safari 15.3 and 15.4 (macOS) but not in any other browser.
If I have the following element:
<input type="file" accept=".json,.cbor">
I can select any .cbor file.
However, if I do:
<input type="file" accept=".json,.jpg,.cbor">
Safari shows a 'tempImageXXXXX.jpg' name and does not select the actual file.
This only happens for .cbor files in our test, but I assume it might have something to do with unknown mime types? .wav, .json, .jpeg, .mp4, etc. all have no issues. Also no other browser has any issues with this. Re-ordering the extensions in the element neither.
To replicate: just rename a txt file to .cbor and paste the code above into jsfiddle.
try using this:
<input type="file" accept="application/json,image/jpg,.cbor" />
if that did not work fine, try changing .cbor with text/plain
The actual answer is that Webkit (the web engine behind Safari) is converting images when an image mime-type is listed in the accept tag of an HTML element. This has been introduced with the following change in Webkit and it is used in their example to transform HEIC images into JPEG on the fly when an image is drag and dropped from the Photos app.
However, at Ocus, we discovered a bug linked to this change. For some mime-types (which I haven't been able to list) the name of the file is changed to tempImageXXXXX. The OP's fix worked because they used image/* instead of a specific image mime-type in the accept field.
So, the real fix is the above bug.
What you can do meanwhile is use:
<input type="file" accept="application/json,image/*,.cbor" />
You can check for specific image mime-type by plugging into the input's events.
I have this simple HTML code
<input type="file" accept="application/xml"/>
https://codepen.io/anon/pen/MPZevE
When I open the file selector popup from chrome, it does not filter the xml files, but when I run it in Firefox it filters well.
I have also tried *.xml which does not work either.
What is the reason behind this ?
Chrome version: 69.0.3497.100
OS Ubuntu 18.04.1 LTS
If you are on windows it will work.
It seems to be the interface between the OS and the browser, they are not understanding each others.
It's safer to use file extensions instead of mimetypes:
<input type="file" accept=".xml"/>
I have simple input for uploading files and it only accepts .class files:
<input type="file" accept=".class">
Problem is that accept property (accept=".class") causes dialog to open very slowly in Chrome, it sometimes takes even up to 10 seconds, but it works perfectly in Mozilla Firefox and Internet Explorer. I am using latest version of Chrome - 53.0.2785.116 m (64-bit). I find this really silly because other extensions work perfectly in Chrome as well. I have read other questions with similar problems, some of them suggested that adding name property may fix the problem, but it doesn't help in this case. Problem is really easy to reproduce, you only need the line of code I provided.
Edit:
Google published an update today - 53.0.2785.143 and it seems to have fixed the problem.
This is a known regression bug in Chrome version 52.0.2743.116.
The temporary workaround is use mime type and be explicit (no wildcards). Ex replace:
<input type="file" name="images[]" multiple="multiple" accept="image/*">
with:
<input type="file" name="images[]" multiple="multiple" accept="image/gif, image/png, image/jpeg, image/bmp, image/webp">
To solve your specific problem this should work:
<input type="file" accept="application/java-vm"> per the mime types list
Anybody knows why this input accepts .php file extensions?
( At least in the latest version of chrome )
<input type="file" accept=".doc,.pdf,.txt,.rtl">
This is apparently a Mac Os only bug.
I wasn't able to reproduce it from my win10 VM, but it is still there in v.55.0.2861.0 canary.
The problem seems to come from the .txt.
It's like it will accept any text/* files, when this extension is set.
You can star this chromium issue which treats of the same underlying issue (with a different extension).
<input type="file" accept=".txt">
I came across a browse file dialog-control tag in html and the tag was
<input id="myfile" name="myfile" type="file" accept="application/pdf"/>
but the 'accept' attribute doesn't seems to have any effect. I am using Internet Explorer 8.
according to the w3schools (http://www.w3schools.com/TAGS/att_input_accept.asp), the 'accept' attribute is not properly supported by any of the major browsers. The filter inside the file browser dialog will not work.
You could use a javascript validation on the form onsubmit event to verify if the file type is correct, returning false otherwise.
It seems like browsers have trouble following the IANA specifications found here:
http://www.iana.org/assignments/media-types/media-types.xhtml
In my case, the application/pkcs* media types don't work at all, while for some reason application/x-pkcs12 works in chrome and partially(.p12) in IE. Firefox seems completely oblivious.
I also found this more optimistic discussion over here. File input 'accept' attribute - is it useful?
So, the best description would be "probably unsupported for uncommon formats", and with the x-pkcs vs pkcs confusion more or less unusable in my case.
Delimiter
I can confirm in some modern browsers that if you want the file dialog types to appear you need to use a comma as a delimiter:
<input accept="image/apng, image/jpeg, image/png" name="example" type="file" />