Hide element on Firefox/IE and show only on chrome

Question

I am using <input type="file" webkitdirectory> to select folders on Chrome. While I know that this feature works only on Chrome, I would like to hide this button on browsers like Firefox and IE that don't support it.

I found a post that suggested to do something like the below code, however it returns false both on chrome and FF.

$scope.isDirSupp = function() {
    var tmpInput = $('#bulkyFolder');
    if ('webkitdirectory' in tmpInput 
        || 'mozdirectory' in tmpInput 
        || 'odirectory' in tmpInput 
        || 'msdirectory' in tmpInput 
        || 'directory' in tmpInput) return true;

    return false;
}

html: <input type="file" webkitdirectory id="bulkyFolder" ng-show="isDirSupp">

What is the best way to show this button on chrome and hide it on Firefox and IE?

score 2 · Accepted Answer · answered Aug 21 '15 at 13:09

2

You can use CSS to show the input element only on Chrome.

#bulkyFolder {
  display: none;
}
#bulkyFolder:not(*:root) { /* Supports only WebKit browsers */
  display: block;
}

<input type="file" webkitdirectory id="bulkyFolder" ng-show="isDirSupp">

answered Aug 21 '15 at 13:09

m4n0

29,823
27
76
89

Thanks! Worked like a charm. – Mustang Aug 21 '15 at 13:59
1

You are welcome :) Tagged this question as CSS as the accepted answer is related. – m4n0 Aug 21 '15 at 14:02

score 1 · Answer 2 · edited May 23 '17 at 10:29

Read How to detect Safari, Chrome, IE, Firefox and Opera browser?

It has browser detection Technique, demo and way of doing it. He has explained to set the Boolean variable to true if it is a particular browser. So u can access it and display particular content on particular browsers alone.

Eg: var isChrome = !!window.chrome && !isOpera;

This will set the variable isChrome

Now you can dynamically create the content in java script and display if isChrome is set.

Hide element on Firefox/IE and show only on chrome

2 Answers2