'Listen for res.download() on html form submission
I'm using a simple HTML form to define some parameters and provide a template PDF which is then uploaded and edited using NodeJS and PDF. The updated PDF is then returned to the user as a download.
The problem I'm having is that I can't seem to 'catch' the download event. The actual download works well using this code on the server:
function downloadPDF() {
let outputPath = "./completed/" + pdfFilename + "-logos.pdf";
res.download(path.resolve(outputPath), function(err) {
if (err) { console.log(err); }
//remove the original uploaded file
console.log('Tidying up file store, deleting original (input) report...');
fs.unlink('./uploads/' + pdfFilename + '.pdf', function(err) {
if(err) return console.log(err);
console.log('Input file deleted successfully');
});
//remove the completed file
console.log('Tidying up file store, deleting completed (output) report...');
fs.unlink(outputPath, function(err) {
if(err) return console.log(err);
console.log('Output file deleted successfully');
});
});
}
Client side I'm using a simple HTML form with a submit function that includes my validation etc:
function submit_form() {
const forms = document.querySelectorAll('.requires-validation')
Array.from(forms)
.forEach(function (form) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
form.classList.add('was-validated');
}else {
//show splash screen
galleryModal = new bootstrap.Modal(document.getElementById('galleryModal'), {
keyboard: false
});
galleryModal.show();
form.classList.remove('was-validated');
document.dataForm.submit();
document.dataForm.reset();
isChecked()
}
})
}
As you can see, I'm showing a splash screen / modal to let the user know the PDF is processing, I can visibly see the file download, but have no trigger to hide my modal again and confirm to the user that the process was a success.
I tried using AJAX to submit the form but since Node is returning a file I wasn't sure on how to handle the response?
(The form is being reset as the client wants to re-use it straight away, there's no confirmation page or similar to display)
Edit to add: Safari and Chrome both throw this error although the file is correctly downloaded: Failed to load resource: Frame load interrupted
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
