Skip to content

Instantly share code, notes, and snippets.

@valioDOTch
Last active June 28, 2016 10:31
Show Gist options
  • Save valioDOTch/8ae329326fc24056fc88c1b7a2e185d1 to your computer and use it in GitHub Desktop.
Save valioDOTch/8ae329326fc24056fc88c1b7a2e185d1 to your computer and use it in GitHub Desktop.
Detect browser which break file selection if accept attribute is provided
//Some mobile browsers have issues with the accept attribute in file input fields, which breaks the file selection for users
//Thus while the accept attribute enhances UX, it should not be used everywhere
//For details of browsers with broken behaviour see http://caniuse.com/#feat=input-file-accept
var breaksFileSelectionForFileInputsWithAcceptAttribute = function(){
//via http://stackoverflow.com/questions/14403766/how-to-detect-the-stock-android-browser
var isNativeAndroidBrowser = (function(){
var navU = navigator.userAgent;
// Android Mobile
var isAndroidMobile = navU.indexOf('Android') > -1 && navU.indexOf('Mozilla/5.0') > -1 && navU.indexOf('AppleWebKit') > -1;
// Apple webkit
var regExAppleWebKit = new RegExp(/AppleWebKit\/([\d.]+)/);
var resultAppleWebKitRegEx = regExAppleWebKit.exec(navU);
var appleWebKitVersion = (resultAppleWebKitRegEx === null ? null : parseFloat(regExAppleWebKit.exec(navU)[1]));
// Chrome
var regExChrome = new RegExp(/Chrome\/([\d.]+)/);
var resultChromeRegEx = regExChrome.exec(navU);
var chromeVersion = (resultChromeRegEx === null ? null : parseFloat(regExChrome.exec(navU)[1]));
// Native Android Browser
var isAndroidBrowser = isAndroidMobile && (appleWebKitVersion !== null && appleWebKitVersion < 537) || (chromeVersion !== null && chromeVersion < 37);
return isAndroidBrowser;
})();
//via https://dev.opera.com/articles/opera-mini-and-javascript/
var isOperaMini = (navigator.userAgent.indexOf('Opera Mini') > -1);
//via http://aamirshahzad.net/detect-ie-mobile-with-jquery/
var isIEMobile = (function() {
var regExp = new RegExp("IEMobile", "i");
return navigator.userAgent.match(regExp);
})();
//http://stackoverflow.com/questions/9038625/detect-if-device-is-ios
var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
return isIOS || isIEMobile || isOperaMini || isNativeAndroidBrowser;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment