I'm working on a problem very similar to this one (lots of code copied from there): Displaying a progress bar for processing an input uploaded via a html form.
HTML:
<script>
function getProgress() {
var source = new EventSource("/progress");
source.onmessage = function(event) {
$('.progress-bar').css('width', event.data+'%').attr('aria-valuenow', event.data);
$('.progress-bar-label').text(event.data+'%');
// Event source closed after hitting 100%
if(event.data == 100){
source.close()
}
}
}
</script>
<body>
<div class="container">
...
<form method="POST" action="/process" enctype="multipart/form-data">
<div class="form-group">
...
<input type="file" name="file">
<input type="submit" name="upload" onclick="getProgress()" />
</div>
</form>
<div class="progress" style="width: 80%; margin: 50px;">
<div class="progress-bar progress-bar-striped active"
role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="progress-bar-label">0%</span>
</div>
</div>
</div>
</body>
app.py:
@app.route('process')
def process_inputs():
...
r.set("progress", progress)
...
@app.route('/progress')
def progress():
def progress_stream():
progress = r.get("progress")
while progress < 100:
yield "data:" + str(progress) + "\n\n"
time.sleep(1)
return Response(progress_stream(), mimetype='text/event-stream')
From my understanding, the progress and process_input functions should run simultaneously, so progress can get update the progress bar while the processing takes place. However, this doesn't work since progress is halted until ``process_input` is finished.
How can I get these two function to run simultaneously? I thought this would automatically be handled by Flask's threaded functionality.
