Is there a way with a javascript/jquery/crazy-css-hack to detect if the user's browser supports rendering a functional <input type="file" /> file upload element? For example, the safari browser on iOS won't render the element and I would like to instead show a message to the user that the functionality isn't supported. I know I can inspect the user agent and check to see if it an iphone/ipad/etc but I don't know what other browsers do or do not support it or will or will not support it in the future.
Add a comment
|
3 Answers
Galambalazs' answer pointed me in the right direction for iOS only. I ended up using this:
function supportsFileInput() {
var dummy = document.createElement("input");
dummy.setAttribute("type", "file");
return dummy.disabled === false;
}
However, it doesn't work for most Android devices, as this function always returns true but renders the button with the text "Uploads disabled".
Comments
You can write a function to do dummy test:
function supportInputType(type) {
var dummy = document.createElement("input");
dummy.setAttribute("type", type);
return dummy.type !== "text";
}
Better yet if you want to execute only once:
var SUPPORT_INPUT_FILE = supportInputType("file");
Then you can use this "constant" in all your code.
The way the test works: First it creates a dummy element. It will have the default type = "text". Next you try to set it to file. In case the browser doesn't support this type it will remain text.
Have fun!
1 Comment
bkaid
This is a good idea but testing on the iPhone returns true even though it doesn't in fact support rendering a file input.
iOS renders the file input element as "disabled". So you can test if there is a disabled input field. I used jQuery to do so.
jQuery(function($) {
$(this).find('[type=file]').each(function () {
if ($(this).attr('disabled')) {
// do sth.
}
})
});
