How to Use Google Chrome 11'S Upload Folder Feature in My Own Code

How do I use Google Chrome 11's Upload Folder feature in my own code?

You should be able to see a demo here: http://html5-demos.appspot.com/static/html5storage/demos/upload_directory/index.html

Basically it works by setting up an attribute "webkitdirectory" on a file input element.

<input type="file" id="file_input" webkitdirectory="" directory="">

Then when the user has selected a folder, it itterates across the "e.target.files" object to get a list of files included in the selection (this enables you to have access to those files from the clientside).

Drag and drop is similar, when you listen to the "ondrop" event on a "draggable" element, if a a directory or selection of files is dropped on to the element, the "files" property on the event will be a list of files contained in the operation.

Browser Folder Uploading

You have to add some parameters to the input tag to support directory uploads: webkitdirectory for Webkit-based browsers (e.g., Chrome) and mozdirectory for Mozilla's browser (Firefox).

The HTML code could look like this:

<input type="file" webkitdirectory mozdirectory … />

You could have a look at https://stackoverflow.com/a/46562869 and https://stackoverflow.com/a/8218074, which are answers to similar questions.

How can I check if the browser support webkitdirectory?

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;
}

Is it possible to upload a whole folder instead of multiple files using Javascript?

No you can't, except if its zipped, or you can use flash, silverlight or applet for uploading more than one file in the same time.

Check these questions:
multiple file upload in just single browse click without jquery

Multiple File Selection For Uploading in ASP.NET

Edit:

For sure uploading multiple files at the same time is available now using html5 https://stackoverflow.com/search?q=multiple+file+upload+html5

What is the best way to upload a folder to a website?

You won't be able to do it with just HTML and Javascript. I'd recommend trying Fancy Upload, a MooTools plugin for multiple file uploads. It uses a mixture of JavaScript and Flash, but degrades gracefully. It works with all major browsers including IE6 and there is also a Flash 10 compatible release available for download (though the demo hasn't been updated yet).


Update (2012-11-26):

Multiple file uploads are possible with valums or blueimp file uploaders.

For recursive directory uploads, your best solution is using Chrome 11's new folder upload API. It also seems to work on Firefox if you use a vendor prefix.

What is the best way to upload a folder to a website?

You won't be able to do it with just HTML and Javascript. I'd recommend trying Fancy Upload, a MooTools plugin for multiple file uploads. It uses a mixture of JavaScript and Flash, but degrades gracefully. It works with all major browsers including IE6 and there is also a Flash 10 compatible release available for download (though the demo hasn't been updated yet).


Update (2012-11-26):

Multiple file uploads are possible with valums or blueimp file uploaders.

For recursive directory uploads, your best solution is using Chrome 11's new folder upload API. It also seems to work on Firefox if you use a vendor prefix.



Related Topics



Leave a reply



Submit