node app download file from gcloud storage to client - node.js

Question

Seems like this should have a canned answer of some sort, but I can't find anything.
The scenario is thus:
I have a web page that lists files to download
The files are located in gcloud storage
I have a node server (express) app to reach into gcloud and fetch the file.
The web page js looks like this:
<script>
function downloadFile(client, fn) {
var x=new XMLHttpRequest();
x.open("GET", "https://<domain>/fetch/" + client + '/' + fn, true);
x.responseType = 'blob';
x.onload=function(e){download(x.response, fn, "<content-type>" ); }
x.send();
}
</script>
It's doing a straight-up XMLHttpRequest() to the server with the requred fetch args.
The relevant part of the node js looks like this:
app.get('/fetch/:client/:filename', async function(req,rsp) {
try {
const storage = new Storage();
const fileLoc = req.params.client + '/' + req.params.filename
const options = {
destination: './' + req.params.filename,
};
// Downloads the file
let file = await storage
.bucket('<bucket-name>')
.file(fileLoc)
let rstream = await file.createReadStream()
.on("error", (err) => {
console.log(" --> rstream error: " + err)
})
.on("response", (strRsp) => {
console.log(' --> response received, sending headers.')
rsp.setHeader('Content-Length', strRsp.headers['content-length'])
rsp.setHeader('Content-Type', strRsp.headers['content-type'])
rsp.header('Content-Disposition', 'attachment; filename=' + req.params.filename)
})
.on("end", () => {
console.log(' --> end received.')
rsp.status(200).end()
return true
})
.pipe(rsp)
} catch(err) {
console.log('download error: ' + err)
rsp.status(400).send('failed')
}
});
The thing is that it works, but it downloads the entire file (silently) before it puts up the save-as dialog.
Is there a way to put up the save dialog before downloading? (Perhaps I need to do the 'content-disposition' header on the client side...?)
Barring that, is there a way to reflect progress back to the web page js so that I can put up a dialog and show progress and maybe a cancel button until it is done and shows the save-as dialog?

Answer 1

Ok, I went with the latter answer. Doing the following:
On download request, pop up a loading dialog with information about the download.
Register a progress callback with the XMLHttpRequest instance
Display the progress information in the dialog
Dialog has a 'Cancel' button which calls 'abort()' on the XMLHttpRequest instance
On completion (or abort) update the dialog and then close it via a timeout.