Flask 流数据后加载新页面

Question

. Answers to this question are eligible for a +50 reputation bounty. siushi wants to to this question.

I have simple Flask App that takes a CSV upload, makes some changes, and streams the results back to the user's download folder as CSV.

HTML Form

<form action = {{uploader_page}} method = "POST" enctype = "multipart/form-data">
    <label>CSV file</label><br>
    <input type = "file" name = "input_file" required></input><br><br>
    <!-- some other inputs -->
    <div id = "submit_btn_container">
        <input id="submit_btn" onclick = "this.form.submit(); this.disabled = true; this.value = 'Processing';" type = "submit"></input>
    </div>
</form>

PYTHON

from flask import Flask, request, Response, redirect, flash, render_template
from io import BytesIO
import pandas as pd

@app.route('/uploader', methods = ['POST'])
def uploadFile():
    uploaded_file = request.files['input_file']
    data_df = pd.read_csv(BytesIO(uploaded_file.read()))
    # do stuff
    
    # stream the pandas df as a csv to the user download folder
    return Response(data_df.to_csv(index = False),
                            mimetype = "text/csv",
                            headers = {"Content-Disposition": "attachment; filename=result.csv"})

This works great and I see the file in my downloads folder.

However, I'd like to display " Download Complete " page after it finishes.

How can I do this? Normally I use return redirect("some_url") to change pages.

Answer 1

Consider usingsend_file() or send_from_directory() for sending files.

Getting 2 responses from 1 request is not possible, but you can split the problem into chunks with the help of some JS, following this simple scheme (not very UML precise, but that's it):

1. POST to /uploader through a function called from the form by onsubmit , so that besides saving the file you can also have some logic there, like checking the response status

2. process the file (I did a mockup of your processing through uppercase() )

3. if the server responds with a 201 ("Created") then you can save the file (in xhr.onload )

4. now you can redirect - in the same tab - to the proper enpoint: /download-complete for 201 or /something-went-wrong for other status codes (in xhr.onreadystatechange ). To test the error page, make some syntax error in the processing inside upload_file() , like data_df = pd.read_csv(BytesIO(uploaded_file. aread() ))

Note the secret_key required to let Flask set the CSRF token for you. [ 08/02/2022 ] I forgot to add the code to make both the source files handle the CSRF token, now I've added it.

Here it is the code:

main.py

from flask import (Flask,
                   request,
                   redirect,
                   render_template,
                   send_file,
                   url_for,
                   Response)
from flask_wtf.csrf import CSRFProtect

from io import BytesIO
import pandas as pd

app = Flask(__name__)
app.secret_key = "your_secret"

csrf = CSRFProtect(app)

@app.route('/')
def index():
    return render_template("index.html")


@app.route("/uploader", methods=['POST'])
def upload_file():
    try:
        uploaded_file = request.files['input_file']
        data_df = pd.read_csv(BytesIO(uploaded_file.read()))

        # do stuff
        data_df["foo"] = data_df["foo"].str.upper()

        # Stream buffer:
        io_buffer = BytesIO()
        data_df.to_csv(io_buffer)
        io_buffer.seek(0)   

    except Exception as ex:
        print(ex)  # and log if needed
        return redirect(url_for("something_went_wrong"))
    else:
        return send_file(io_buffer,
                         download_name="result.csv",
                         as_attachment=True), 201


@app.route("/download-complete")
def download_complete():
    return Response("<h1>Download Complete!</h1>", status=200)


@app.route("/something-went-wrong")
def something_went_wrong():
    return Response("<h1>Something went wrong!</h1>", status=500)

The form with the JS handler (thanks to the author of this article):

<form enctype="multipart/form-data" onsubmit="return submitHandler()">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    <label>CSV file</label><br>
    <input type="file" id="inputFile" name="input_file" required /><br><br>
    <!-- some other inputs -->
    <div id="submit_btn_container">
        <input id="submit_btn" type="submit" />
    </div>
</form>

<script>
function submitHandler() {
    var csrf_token = "{{ csrf_token() }}"; 

    var formData = new FormData();
    formData.append("input_file", document.getElementById("inputFile").files[0]);

    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/uploader", true);
    xhr.setRequestHeader("X-CSRFToken", csrf_token);
    xhr.send(formData);

    xhr.onreadystatechange = function() {
        console.log(`xhr.readyState: ${xhr.readyState}`);
        console.log(`xhr.status: ${xhr.status}`);
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 201) {
                window.open('/download-complete', target="_self", rel="noopener");
            }
            else {
                window.open('something-went-wrong', target="_self", rel="noopener");
            }
        }
    };

    xhr.onload = function(e) {
        if (this.status == 201) {

            // Create a new Blob object using the
            // response data of the onload object:
            var type = xhr.getResponseHeader('Content-Type');
            var blob = new Blob([this.response], {type: type});

            // Create a link element, hide it, direct
            // it towards the blob, and then 'click' it programmatically:
            let a = document.createElement("a");
            a.style = "display: none";
            document.body.appendChild(a);

            // Create a DOMString representing the blob
            // and point the link element towards it:
            let url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = 'result.csv';

            // Programatically click the link to trigger the download:
            a.click();

            // Release the reference to the file by revoking the Object URL:
            window.URL.revokeObjectURL(url);

        }
        else {
            window.open('something-went-wrong', target="_self", rel="noopener");
        }
    };

    return false;
}
</script>

For completeness, my dummy csv "file.csv" :

foo
bar

Answer 2

Here is some changes.

set window.open('') in input onclick event.

HTML Form

<form action ="/uploader" method = "POST" enctype = "multipart/form-data">
        <label>CSV file</label><br>
        <input type = "file" name = "input_file" required></input><br><br>
        <!-- some other inputs -->
        <div id = "submit_btn_container">
            <input id="submit_btn" onclick = "this.form.submit(); this.disabled = true; this.value = 'Processing'; window.open('your_url');" type = "submit"></input>
        </div>
</form>

Answer 3

You need two functions, one to deal with the processing such as uploadFile(), and another in the same app route to return render template.

When the uploadFile() function is completed: completed = True

Then, code another function which tests the global variable if completed: to return render template.

See: How can I use the same route for multiple functions in Flask

Finally, return a variable to the page with Jinja2 and use Javascript to identify if that variable exists to load your 'download completed' page by Javascript.

Python:

    from flask import Flask, request, Response, redirect, flash, render_template
    from io import BytesIO
    import pandas as pd

    completed = False
    
    @app.route('/uploader', methods = ['POST'])
    def uploadFile():
        uploaded_file = request.files['input_file']
        data_df = pd.read_csv(BytesIO(uploaded_file.read()))
        # do stuff
        # When stuff is done
        global completed
        completed = True
        # stream the pandas df as a csv to the user download folder
        return Response(data_df.to_csv(index = False),
                                mimetype = "text/csv",
                                headers = {"Content-Disposition": "attachment; filename=result.csv"})
                                

How to load a new page: https://www.geeksforgeeks.org/how-can-a-page-be-forced-to-load-another-page-in-javascript/

Javascript conditionals: https://www.w3docs.com/learn-javascript/conditional-operators-if.html

Using Jinja2 to render a variable: https://jinja.palletsprojects.com/en/3.0.x/templates/

Also, you should really wrap your uploadFile() function with try and except to catch upload errors.