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

Question

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

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

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

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

Answer 4

FTP? And if necs, wrap in Java Applet, ActiveX or whatever you want.

If not, although you don't want flash, SWFUpload is quite cool, you may want to reconsider it as a decent option.

Answer 5

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%)

Answer 6

This isn't a pure js/html solution. As EndangeredMassa has pointed out, it's not possible. In fact, this idea is an IE/Windows only solution. I don't recommend it, but it can work.

So, all disclaimers aside ...

Many years and several employers ago, we used to do some client side stuff that instantiated the FileSystemObject. It would iterate through each of the files and pass them through to the server one at a time. Can't remember the details of how we did that :o(

Anyway, this usually meant that the client box would need to have to add the site to the list of trusted sites and give trusted sites a bunch of permissions that are turned off (for very good reasons). Stuff like the ability to Initialize and script ActiveX controls not marked as safe. That kind of thing.

I know that this isn't a perfect answer, but it could point you in the right direction.

Answer 7

Here is pure JS solution using ExtJS library