CODEWITHSUNDEEP
javascript
Claus
Claus

Reputation: 550

How to detect download complete in javaScript

I want to execute two operations in one javaScript function

  1. force download of a csv file

  2. send an ajax request to mark records in table that records were downloaded.

Since both of these operations will present the user with prompts and dialogue boxes, I want to delay execution of the 2nd event until the first event is complete.

When the user opens the page, they are presented with a list of current records. They check records they wish to process. The checked records are then packaged and the user is presented with the download "Save" or "Open" box. when that operation is complete then the ajax request should execute.

My thought was I could detect when "a" was removed from the document. But I'm not sure how I would do that.

Here is my code for the download

    var a = window.document.createElement('a');
    a.href = window.URL.createObjectURL(new Blob(exportArray, {type: 'text/csv'}));
    a.download = 'jobCostHandOff.csv';

    // Append anchor to body.
    document.body.appendChild(a)
    a.click();

    // Remove anchor from body
    document.body.removeChild(a)

Upvotes: 5

Views: 18033

Answers (1)

AbVog
AbVog

Reputation: 1555

I have implemented such a mechanism in a web application with the following workflow:

  • the user selects a file on their computer
  • they configure options of the app
  • they click the submit button
  • a loader starts animating client-side
  • the browser send the entire form to the server for processing
  • the processing (which is actually about converting a guitar score to a tablature) yields a text/plain file, which is stored on the server (but not sent yet): a small JSON with the link to the generated file is sent back. That JSON data represents either success or error. In the case of error, the message is displayed to the user. In the case of success, the status field is set to OK and the payload contains the link to the file.
  • the JS code handling the AJAX call, upon success, triggers the download.
  • the browser presents the user with the usual (e.g. in Firefox) "open or save file" dialog
  • the web app detects the opening of the dialog and hides the loader.

It seems pretty similar to your need.

The gist of the solution is this:

  • triggering the file download is done by setting the src attribute of an iframe hidden in the page
  • the server sends a cookie in response to the request for the file to be downloaded
  • a JS code on a timer inspects the cookies of the document (which, very fortunately, includes the cookies to the iframe) and upon seeing "the Holy cookie", knows for sure that the file download has started, which is the only event the code can grab.

Quickly looking through the PHP code of my web app, I see this:

// This cookie is for the jQuery.fileDownload plugin
header('Set-Cookie: fileDownload=true; path=/');

You have the name of the JS code that does the last bullet point item in the code comment :-) Another reason among the myriad of reasons why I write commented code...

HTH.

Upvotes: 2

Related Questions