On my project I use something like the following function to redirect users in order to download a file
function promptDownload(file){
location.href = "/"+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 pleted or cancelled.
There should be something like onLoad, onFinishedLoading, onConnectionEnd or etc but I couldn't find anything.
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./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 pleted or cancelled.
There should be something like onLoad, onFinishedLoading, onConnectionEnd or etc but I couldn't find anything.
- 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. 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 Commented Jun 14, 2011 at 15:28
- @Brad: That's what WeTransfer does. – Midas Commented Jun 14, 2011 at 15:31
1 Answer
Reset to default 13You 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>