I'm writing a Flask application that allows a user to select a project and project version from two dropdowns, then process and download an Excel document with information relevant to the selections made. I've been able to make this work, but my code causes the browser to show the refresh animation until the file is fully processed and begins to download. Ideally, I'd like the browser to process the file without showing the refresh animation. My current code is as follows:
The user makes the selections and hits the export button using this HTML:
<form method="POST" action="">
<h2 class="text-center">Select Project and Version</h2>
{{ form.hidden_tag() }}
<div class="form-group">
{{ form.projects(class="form-control-sm") }}
{{ form.versions(class="form-control-sm") }}
</div>
<div class="form-group">
<button type="button" id="export" class="btn-primary form-control">Export</button>
</div>
</form>
Upon hitting export, the following JavaScript is ran:
let export_button = document.getElementById('export')
export_button.onclick = function() {
project_index = project_select.value;
version_index = versions_select.value;
location.href = '/' + project_index + '/' + version_index;
}
The following route is called to process then send the file for download:
@app.route("/<project_index>/<version_index>")
def export(project_index, version_index):
# Call functions to process file
return send_file(output, attachment_filename="testing.xlsx", as_attachment=True)
The processing of the file includes various API calls that cause the process to take up to roughly 30 seconds. Is there a way I can make this work without having the browser show the refresh animation? Perhaps using AJAX?