Python Flask Append All Strings to DOM

Question

So I’m using html Jinja templates to pass in a variable that I calculated in my backend. Basically my Python function takes an image that the user uploads on the front end, tests it against my ML model on IBM Cloud, and based on the returned threshold, I return a string to the front end saying “red” for bad and “green” for good. At the moment when I upload an image, it appends the variable to the DOM just fine, but when I upload a second image, it refreshes the page and the past variable output disappears. How would I go by appending all strings to the DOM? In a nutshell, maintain every image process request on the front end even though the page refreshes on submission.

Current Output (no submissions):

[Upload Image Button]

Current Output (1 submission):

[Upload Image Button]

red

Current Output (2 submissions):

[Upload Image Button]

green

Basically, on each submission, the appended string is overwritten by the next submission, and I want it to look like the following:

Expected output (no submissions):

[Upload Image Button]

Expected output (1 submission):

[Upload Image Button]

red

Expected output (2 submissions):

[Upload Image Button]

red
green

User Manually Refreshes Page:

[Upload Image Button]

(^^^ the page resets)

Snippet from my Python Code:

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    marker_color = ''
    if request.method == 'POST':

        # Grab the file name from POST request
        file = request.files['file']

        # If filename empty (user didn't upload a file via POST)
        if file.filename == '':
            flash('No selected file')
            return redirect(request.url)

        # User selected a file and this file is valid
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            data = send_to_IBM(filename)
            parsed_json = json.loads(data)
            print(parsed_json)

            # Parse the score out of the returned JSON blob. If the threshold is greater
            # than 0.6, the send_to_IBM function returns no 'score' index, so the area
            # must not be flooded and we indicate it as such w a score of 0 and green marker
            try:
                score = float(parsed_json["images"][0]["classifiers"][0]["classes"][0]["score"])
                print("bad")
                marker_color = 'red'
            except:
                print("good")
                score = 0.0
                marker_color = 'green'
    return render_template('index.html', marker_color = marker_color)

HTML:

<html>
<head>
    <title>Test Application</title>
</head>
<body>
    <form method=post enctype=multipart/form-data>
        <input type=file name=file></br>
        <input type=submit value=Upload>
    </form>
    {{marker_color}}
</body>

There are really only 2 solutions: 1) use Javascript to append the next marker color to the DOM as you receive it from the server or 2) keep a history of the marker colors serverside and render that list in place of {{ marker_color }}. — mario_sunny
– mario_sunny, Commented Nov 3, 2019 at 5:51
@mario_sunny I made a global list that stores all marker colors, but on the page refresh it warns me that I'll be resubmitting my last input and then it just adds another marker color to the page. When the user manually refreshes the page I want the list to disappear. Any idea how to do that? — danielschnoll
– danielschnoll, Commented Nov 3, 2019 at 5:57

rfheise · Accepted Answer · 2019-11-03 06:19:22Z

1

I would add some type of cookie if you wanted to do take care of it server-side.

ex)Server-Side

if request.method == "GET":
     #clear session when user loads page
     session["page"] = []
 if request.method == "POST":
     #append a color to the list of colors
     session["page"].append(color)
     #set marker color equal to list of colors
     marker_color = session["page"]

ex) on html page - this iterates over each of the colors in the list

<html>
<head>
    <title>Test Application</title>
</head>
<body>
    <form method=post enctype=multipart/form-data>
        <input type=file name=file></br>
        <input type=submit value=Upload>
    </form>
    {%for color in market_color%}
    {{color}}
    {%endfor%}
</body>

edited Nov 3, 2019 at 6:19

answered Nov 3, 2019 at 6:14

rfheise

746 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

danielschnoll Over a year ago

what is this "page" attribute in the session array?

rfheise Over a year ago

@danielschnoll Sessions are in the flask library so you have to import it with “from flask import session”. Sessions are a dict so “page” is just a key. If you’re confused about how sessions work in flask just look up the documentation online.

Collectives™ on Stack Overflow

Python Flask Append All Strings to DOM

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related