20

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

Community
  • 1
  • 1
torial
  • 13,085
  • 9
  • 62
  • 89

7 Answers7

27

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.

Community
  • 1
  • 1
VirtuosiMedia
  • 52,016
  • 21
  • 93
  • 140
  • 1
    Why is it not possible to upload single files as well as folders if you have the webkitdirectory attribute set? It's odd that it's an either/or thing... Also, can I only upload one directory or can I choose a couple with the multiple attribute set? – CJT3 Mar 01 '13 at 03:15
  • This is an old question and the accepted answer is now outdated. See my answer to this question for several working solutions https://stackoverflow.com/questions/42239663/upload-folder-and-all-its-content-in-javascript/45223463#45223463 – CaseyC Jul 20 '17 at 19:18
  • valums AKA Fine Uploader is no longer maintained https://github.com/FineUploader/fine-uploader/issues/2073 – jpgeek Apr 05 '21 at 07:28
4

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.

silverwind
  • 3,296
  • 29
  • 31
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.

eyelidlessness
  • 62,413
  • 11
  • 90
  • 94
  • Is it possible to get a list of files within a particular folder, and feed that automagically into the input control? – torial Oct 31 '08 at 17:29
  • I answered by own question from the comments: http://www.codeproject.com/KB/scripting/search_in_files.aspx – torial Oct 31 '08 at 17:31
  • Although, the problem w/ the link I found is that it requires ActiveX. And at that point, I might as well use flash :-/ – torial Oct 31 '08 at 17:32
2

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

Community
  • 1
  • 1
mikermcneil
  • 11,141
  • 5
  • 43
  • 70
1

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.

wcm
  • 9,045
  • 7
  • 39
  • 64
1

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.

scunliffe
  • 62,582
  • 25
  • 126
  • 161
1

Here is pure JS solution using ExtJS library

Thevs
  • 3,189
  • 2
  • 20
  • 32
  • 1
    This works for multiple files, but not for folders. See http://stackoverflow.com/a/13486123/486547 – mikermcneil Nov 21 '12 at 04:07
  • What do you mean by 'uploading folder'? Anyway there would be files, contained in folder. – Thevs Nov 26 '12 at 06:11
  • You can use standards-based technology to upload multiple files using a file upload box (i.e. http://imgur.com/Cl1RB ), but you can't actually choose a folder (http://imgur.com/2dZtS ) and have its contents recursively uploaded. To do that, you need to use the -moz / -webkit proprietary stuff. Hope that helps! – mikermcneil Nov 26 '12 at 07:20