Sequentially download files from Azure Blob Storage from a browser

Question

Brief Background: I have a web service that stores files in Azure Blob Storage. Users of the service can download multiple files at once. If the total file size of all files being downloaded is relatively small, then I ZIP the files on my server and return that ZIP file - no problem here.

Scenario: If, for instance, a user wants to download 3 files that are 1GB each it isn't realistic for me to download these files to the server, ZIP them up and then return the ZIP file to the browser. So for these scenarios I return the Azure Blob Storage URLs to the browser and have the user download the files directly from Azure Blob Storage as to not put strain on my servers.

Problem: Currently, the browser just receives all of these URLs and downloads them all at once. I need a way of downloading these files sequentially. So the browser receives a list of Blob Storage URLs and downloads them one at a time. However, I've no idea how to detect on the browser when one download is complete and so another one can begin.

Any advice/suggestions on how I should approach this are welcome.

EDIT: My front end receives a list of download ID's and begins downloading

for(var i = 0; i < listOfDownloads.length; i++) {

    //Go direct to Azure blob storage for each ID in list of IDs
    //This immediately begins a download direct from blob storage
    window.location.href = {azure blob storage URL};

    //Find way of detecting when download complete so can move on to next

}

Show the code how you download these files at once, so we can start from this point. — Slava Utesinov
There isn't any code on how to download these files. It is literally a GET request to an Azure Blob Storage URL. — George Harnwell
How you made GET request, show code: is it via jQuery, something native or another. — Slava Utesinov
Updated answer to show front end code. Currently all blobs are downloaded on page load because I have no way to see when one file has completed. — George Harnwell

Slava Utesinov Slava Utesinov · Accepted Answer · 2017-12-19T06:49:33

You can try jquery.fileDownload library with Promise:

function downloadFilesSequantially(listOfDownloads) {

    function downloadComplete(link) {
      return new Promise(function(res, rej) {
        $.fileDownload(link)
          .done(function() {
            res(0);
          })
          .fail(function() {
            rej(0);
          });
      })     
    }

    listOfDownloads.reduce(function(prev, next) {
      return prev.then(downloadComplete(next));
    }, Promise.resolve(0))
}

Also you should modify this library, because it requires specific cookie in response, that you can't provide due to direct links to blobs (if's statement condition was replaced):

if (true/*document.cookie.indexOf(settings.cookieName + "=" + settings.cookieValue) != -1*/) {

    //execute specified callback
    internalCallbacks.onSuccess(fileUrl);

    //remove the cookie and iframe
    document.cookie = settings.cookieName + "=; expires=" + new Date(1000).toUTCString() + "; path=" + settings.cookiePath;

    cleanUp(false);

    return;
}

Sequentially download files from Azure Blob Storage from a browser

1 Answers