I would like to upload a image using safari on ipad
here is my html code
<input type="file" accept="image/*">
When i try to select a file, safari prompt me to choose "take photo" or "select existed file", how can i disable the "take photo" options, and just select an existing file?
I also look up w3c document, and try codes below, but not work
<input type="file" accept="image/*" capture="filesystem">
According to this HTML5 compatibility comparator, Safari supports only partially the media capture feature: it complies with the accept attribute but ignores the catpure attribute.
So I am afraid you will have to wait for a better support from Safari before it works the way you want...
What's more, according to the W3C specifications:
When the capture attribute is specified, the user agent SHOULD invoke a file picker of the specific capture control type.
The keyword SHOULD means that Safari can choose not to follow the recommendation for some reason and still claim to be compliant with the standard...
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.
Works fine in most browsers accept...
OS X 10.7.5 - Firefox 30.0 + Safari 6.1.5
Here is the HTML:
<input id="fileupload" type="file" name="files[]" data-url="/do/upload_my_files" accept=".pdf,.docx,.doc,.xls,.xlsx,.txt,.csv,.ppt,.pptx,.zip,.rar,.psd,.txt,.pps,image/*" multiple>
It shows only images available to select, all other files are greyed out.
The HTML 4.01 specification allows only media types (MIME types) in the content of an accept attribute. HTML5 extends this with notations like .pdf. Browsers that do not support the latter see your attribute just as accept="image/*">. Thus, add the media types (when available) such as application/pdf to the list, primarily using the authoritative media type list by IANA. If this does not help, you are probably out of luck and should perhaps remove the attribute, if the browsers that don’t cope with it are important enough.
I had this same issue and found that while Safari will not accept the comma-separated extensions, you can actually use the previously mentioned IANA list to address most types, including MS Office files (which is what I needed):
.doc/.docx: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xls/.xlsx: application/vnd.openxmlformats-officedocument.wordprocessingml.document
.ppt/.pptx: application/vnd.openxmlformats-officedocument.presentationml.presentation
It is working for me in both Chrome and Safari (6+). The IANA list doesn't make it easy to find what you need, but there is a handy list at freeformatter.com that tells you exactly what to use for each extension.
I've observed that the selected file path is being displayed on Internet explorer and same does not appear in any other browser as shown below,
<li>Left File : <input type="file" name="dataFile1" id="fileChooser1" /></li><li><br></li>
<li>Right File : <input type="file" name="dataFile2" id="fileChooser2" /></li><li><br></li>
<li>Config File : <input type="file" name="dataFile3" id="fileChooser3" /></li><li><br></li>
So how do I get the path like in IE in chrome?
For security concerns modern browsers such as Chrome and Firefox do not provide you with any path information, therefore you simply can't access it. I don't think you want to rely on a feature which is only provided by IE6 and earlier versions. Also, why would your web app need to know about the full path of file to be uploaded back on client's local machine. It would be great to know the use case for the same. I am curious.
I want to allow users to select a local directory on a webpage (and then read all the files in the directory).
In Chrome I can add the webkitdirectory attribute to enable this functionality. According to a comment in this question and an answer to this question you should be able to do the same in firefox using mozdirectory but I am unable to get it to work.
I have tried the following in Firefox with no luck (works in Chrome):
<input type="file" id="files" name="files[]" multiple mozdirectory="" webkitdirectory="" directory="" />
My Firefox version is 10.0.
Are there any way for a user to select a directory for input in Firefox without requiring an add-on on the client-side (like Flash)?
Firefox doesn't have any API to upload directories yet (which is a shame)...not even in the nightly builds, so I don't think we will see support on this very soon. IE doesn't have one either. If you want to take advantage of this feature you must force the users to use Google Chrome (e.g. make them aware that upload directory is available only in Chrome).
A workaround would be to compress the directory in a .zip file and read it with the FileReader API. See https://stackoverflow.com/a/7842896/613453
Update
IE Edge now has support for this.
https://msdn.microsoft.com/en-us/library/mt574730(v=vs.85).aspx
Now you can upload directory using drag and drop with chrome
read this article you will get more info
http://updates.html5rocks.com/2012/07/Drag-and-drop-a-folder-onto-Chrome-now-available
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" />