3

I am currently working on a web media player and would like to use the new "Folder Upload API" from Google Chrome (or however its being called officially) to recursively work with local directories. Unfortunately I wasn't able to find any further information on this and I'm not quite familiar with HTML5's FileReader object. Is there any official site or documentation of that specific API by any chance?

Without posting the entire and minor code of my example, I would like to refer to a JSFiddle site: http://jsfiddle.net/a869q/

The example displays both, the 'usual' upload method and the one using webkit-directory.

<input id="file_input" type="file" multiple="" />
<input id="file_input_dir" type="file" multiple="" webkitdirectory="" directory="" />
<div id="test"></div>

On event.change the references (blobs) to these files are then being used to get duration of mp3-files and to create a list of audio-elements. Works just fine. Choosing directories only works in Chrome.

$('#file_input, #file_input_dir').change(function(e) {
    $.each(e.target.files, function(index,file) {
        // ....
        $('#test').append('<audio src="'+window.URL.createObjectURL(file)+'"></audio>');
        // ....
    });
});

Now, using Javascript / jQuery I would like to find out if the client does support the new webkit-directory feature and I really hope that there is a way doing this without just reading the UserAgent and check against string "Chrome". Any ideas?

Regarding the matter, that it's only working in Chrome at the moment, I would also like to know if there is a common or suitable workaround to let this work in different browsers, but at least Firefox. In this article there have been some neat posts made with different examples already. But mainly all the working plugins are using Flash or Applets which I'm really trying to avoid. Still hoping for solution.

In addition, talking about the method I'm gathering the duration of chosen audio-files with (please see JSFiddle). Any way doing this with pure JScript, without creating HTML5-Audio-Elements?

Alex Kulinkovich
  • 4,408
  • 15
  • 46
  • 50
b4ttl3m4st3r
  • 106
  • 11
  • Have you considered using file/directory drop feature of chrome? Can that be an alternative? – Tukuna Apr 23 '14 at 17:59
  • @Tukna: THX, I am aware of that feature but not looking for an alternative in Chrome. Actually I'm planing to use drop functionality as well in a later version but first have to determine client's support for this feature. – b4ttl3m4st3r Apr 24 '14 at 10:02

1 Answers1

5
(function() {
var input = document.createElement("input");
input.type = "file";
return !!("webkitdirectory" in (input || document.querySelectorAll("input[type=file]")[0] ))
}())
guest271314
  • 1
  • 15
  • 104
  • 177
  • Thanks! `if("webkitdirectory" in ($("#file_input_dir")[0]))` is what I was looking for. Didn't know it's that simple. I should look into the File API to fully understand: http://www.w3.org/TR/FileAPI/ – b4ttl3m4st3r Apr 24 '14 at 20:15