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
Using ≪Style≫ Tags in the ≪Body≫ With Other Html
How to Add an HTML Link in the Body of a Mailto Link
Component to Inject and Interpret String With HTML Code into Jsf Page
How to Keep Indent For Second Line in Ordered Lists Via Css
Single VS Double Quotes (' VS ")
Using External Images For CSS Custom Cursors
How to Make a HTML Page in A4 Paper Size Page(S)
"X-Ua-Compatible" Content="Ie=9; Ie=8; Ie=7; Ie=Edge"
How to Get Centered Content Using Twitter Bootstrap
Col-Xs-*' Not Working in Bootstrap 4
How to Prevent Downloading Images and Video Files from My Website
How to Fallback to Local Stylesheet (Not Script) If Cdn Fails
How to Display Just a Portion of an Image in Html/Css
How to Apply CSS Page-Break to Print a Table With Lots of Rows
Why Does Html5 Form-Validation Allow Emails Without a Dot