Send multiple files to the user for download one a

Question

I'm trying to do the following:

• A grid with a lot of files is shown to the user
• The user selects as many files as he wants
• The user should be prompted for each file for the target location
• Each file should be downloaded one after another

I can't find a good solution for this because:

• I need a cross browser solution (no plugins) but i can rely on IE10+ and HTML5
• The files should not be downloaded as a zip file or any other archive
• Using document.write for inserting multiple iframes feels bad and is discouraged by most browsers

Answer 1

I found a solution that works (for me) in all browsers. It's does not feel that good on the code side (at first) but it seems pretty stable to me on different browsers and different machines.

Chrome will ask the user to allow the site to download multiple files. IE doesn't care at all.

var onDownload = function(){
       var docs = module.getSelectedElements();        

       for(var i = 0; i < docs.length; i ++) {
           (function(){
               var doc = docs[i];
               window.setTimeout(function(){
                  $jq("#downloadIframe").attr("src", doc.url);
               }, i * 500);
           })();
       }

};

Answer 2

I managed to build a possible example of downloading multiple files using the HTML FileSystem API. I ran into a few problems while building this which I'll note down below. Beware that this is just an example and could be improved by a lot (code-wise and feature-wise).

I stopped developing because I was unable to transfer binary files but maybe someone can give me a clue on how to do this. (I struggle with binary ajax transfers and JSON at the moment. (I can't say if it's possible to transfer images/binaries over ajax at all).

Published Sourcecode on GitHub: https://github.com/posixpascal/FileSystem-API-Example

A few things to note:

• Your users have to click 'Allow this webpage to download multiple files' as soon as the popup is visible. Otherwise it won't work.

• This uses heavy I/O operations on the server side (at least with my code). one should rewrite that before using this script.

• Be aware of this issue: https://code.google.com/p/chromium/issues/detail?id=94314 Users with non-latin characters in their Windows Username aren't able to download the files.

• You can't resume the download if you using TEMPORARY FileSystem Storage. (Chrome throws an error on my machine when I try to access the downloaded files twice)

• Also be aware of loops, because it can screw other peoples browsers.

  1. Youtube Example: https://www.youtube.com/watch?v=F9T4i4qrYtc&list=UUi1sRIczZxhsuWPPUK7xxTA
  2. Live Example: http://pascalraszyk.de/_broken_do_not_use/

All I can say is that this is not a solution at the moment and the API isn't ready for the mass. You can add further support by using Flash and other utils to compensate lack of FileSystem API support.

How it works:

As soon as the user clicks on the download link, my script gathers information about the files using a server side PHP script. After that it requests a few chunks until the filesize from the locally stored file matches the one sent by the php script.

As soon as the file is ready, I create an invisible a tag and set href to "filesystem:myurl.de/theFile" and trigger a click event on that link. I also add 'download' property so the browser is forced to download .txt files as well.

This is not a fully solution to your problem but you can check the sourcecode and hopefully built something to suit your needs. I guess you already moved on to a different approach to download multiple files.