Last active
June 28, 2016 10:31
-
-
Save valioDOTch/8ae329326fc24056fc88c1b7a2e185d1 to your computer and use it in GitHub Desktop.
Detect browser which break file selection if accept attribute is provided
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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