'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