CODEWITHSUNDEEP
javascriptcsswebkitinput-type-file
Mustang
Mustang

Reputation: 604

Hide element on Firefox/IE and show only on chrome

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?

Upvotes: 1

Views: 4977

Answers (2)

J.Selva
J.Selva

Reputation: 173

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.

Upvotes: 1

m4n0
m4n0

Reputation: 32285

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">

Upvotes: 2

Related Questions