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

I need an easy way to allow users to upload multiple files at once (ie I need to allow a user to upload a folder). I do not wish to put the burden of zipping on the user.

I would prefer to avoid Flash or variants if possible. I'm looking for a straight javascript / HTML solution if it is possible. Please note, this rules out the answers at: What is the best client side browser library to upload multiple files over http?.

Solution 1:

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.

Solution 2:

With Firefox 42 and Edge having implemented the new directory upload proposal we'll finally able to do cross-browser directory uploads. The APIs are nasty enough that you may want to check out my wrapper, uppie.

Solution 3:

If you're avoiding Flash (and presumably Java?) the JS/HTML-only solution still requires single-file inputs, but essentially you attach an onchange event to your input, adding a new input to the DOM whenever a file is selected.

Solution 4:

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

For recursive directory uploads, your options are more limited:

• 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.

• This is also possible cross-browser with a Java applet. However the % of folks with a JRE installed has gotten pretty low these days (< 70%)