javascripthtmlgoogle-chromewebkitmultifile-uploader

How can I check if the browser support webkitdirectory?


I am using Google Chrome's folder upload feature in my project, described here: How do I use Google Chrome 11's Upload Folder feature in my own code?

I have a button that trigger an input field when be clicked. My question is How can I check if the browser support webkitdirectory or not? so I can hide my button or alert the user to use chrome for this service.

<button>Upload Folder</button>
<input type="file" name="file[]" multiple webkitdirectory>

<script>
  $("button").click(function(e) {
    /* TODO: Detect webkitdirectory support */
    if(webkitdirectory)
      $('input').trigger('click');
    else
      alert('Use Chrome!');
  });
</script>

Solution

  • Based on Modernizer and this answer I could use this function to detect if directory select is supported:

    function testFileInputDirectory() {
        var elem = document.createElement('input'),
        dir = 'directory',
        domPrefixes = [ "", "moz", "o", "ms", "webkit" ],
        prefix;
        
        elem.type = 'file';
        
        for (prefix in domPrefixes) {
          if (domPrefixes[prefix] + dir in elem) {
            return true;
          }
        }
        return false;
    }