javascript - Flask Static Progress Screen

Question

Option 1: No Javascript

I just want to display a static template that says 'please wait...' while a task is running. Here is a simplified version of the route function:

@app.route('/import/towers/<case_id>/<filename>', methods=['GET', 'POST'])
def import_towers(case_id=None, filename=None):
    case_number = TollsCase.get_case_number(case_id)
    with open(os.path.join(app.config['UPLOAD_FOLDER'], filename), 'rb') as f:
        csv_f = csv.reader(f)
        headers = next(csv_f)
        if flask.request.method == 'POST':
            # show static progress screen here then process records in csv file
            for row in csv_f:
                # process record
            return 'success'

It won't let me use render_template without returning, which skips the processing I need done. I need it to display a progress screen while the process runs then show 'success' when done. How do I do this?

---

Option 2: Javascript

If that can't be done and Javascript must be used, then this is what I've tried so far:

After the html, I have this in the template:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="application/javascript">
    $('form').on('submit', function() {
        $('#content').empty();
        $('#content').html('please wait...');
    })
</script>

It works fine for replacing the content to show a progress page on submit, but now the form is not submitted for server-side handling. I tried setting data-ajax="false" in the form attributes but that didn't resolve the issue. I also tried simply using this.submit(); before clearing the content but that makes it wait on the server-side processing, thus defeating the point of a progress/wait screen. I still need the form data submitted for server-side handling if I use Javascript.

Answer 1

You can stream a response to get a very simple progress report. See the docs on streaming for more information. This example outputs a percent complete while waiting 5 seconds. Rather than sleeping, you would be processing csv or whatever you need to do.

from flask import Flask, Response
import time

app = Flask(__name__)

@app.route('/')
def index():
    def generate():
        yield 'waiting 5 seconds
'

        for i in range(1, 101):
            time.sleep(0.05)

            if i % 10 == 0:
                yield '{}%
'.format(i)

        yield 'done
'

    return Response(generate(), mimetype='text/plain')

app.run()

This outputs the following over 5 seconds:

waiting 5 seconds
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
done

This isn't very complex, but it's also just plain text. A much more powerful solution would be to run the task in the background using Celery and poll it's progress using ajax requests.