9

On my project I use something like the following function to redirect users in order to download a file

function promptDownload(file){
      location.href = "http://example.com/downloads/"+file;
}

As we all know, when I call this function, browser only prompts a download dialog and does not interrupt my application flow. What I would like to do is to determine when this download completed or cancelled.

There should be something like onLoad, onFinishedLoading, onConnectionEnd or etc but I couldn't find anything.

Serkan Yersen
  • 1,233
  • 2
  • 10
  • 19
  • 2
    I could be wrong, but I don't believe you can. If you want _that_ much control, you may need to hand it off to a silverlight/flash app and embed callbacks. (That's like redirecting the user to google.com and knowing when google has finished loading). -- EDIT: You may also be able to use a server-side file handler and ajax client-side to keep both sync'd, but that seems very tedious. – Brad Christie Jun 14 '11 at 15:28
  • @Brad: That's what [WeTransfer](https://www.wetransfer.com/) does. – Midas Jun 14 '11 at 15:31

1 Answers1

12

You can't determine download progress if you download the file that way.

If you download the file using XMLHttpRequest, then you can listen for load, error and progress events like this:

function log(message) {
  return function () {
    alert(message);
  };
}

function download(file, callback) {
  var request = new XMLHttpRequest();
  request.responseType = 'blob';
  request.open('GET', file);
  request.addEventListener('load', log('load ' + file));
  request.addEventListener('error', log('error ' + file));
  request.addEventListener('progress', log('progress ' + file));
  request.addEventListener('load', function () {
    callback(request.response);
  });
  request.send();
}

function save(object, mime, name) {
  var a = document.createElement('a');
  var url = URL.createObjectURL(object);
  a.href = url;
  a.download = name;
  a.click();
}

document.querySelector('#download').addEventListener('click', function () {
  download('test.pdf', function (file) {
    save(file, 'application/pdf', 'test.pdf');
  });
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <button id="download">Download</button>
    <script src="script.js"></script>
  </body>
</html>
Rodrigo5244
  • 5,145
  • 2
  • 25
  • 36