Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

653
Views
Python web app with Flask, updating image tag on view with button tag

I'm developing a WEB APP with Python and Flask. I want to display an image using an html image tag and a button tag to open the browser and choose an image and display it inside the tag by updating it using Jinja. How could I do that ?

main.py:

'''

image_filepath = ''

def browse_img_file():
    global image_filepath
    path = easygui.fileopenbox(msg="", title="choose an image", multiple=False, filetypes=['.png', '.jpg', '.gif'])
    image_filepath = path

@app.route("/")
def index():
    global image_filepath
    if image_filepath == '':
        image_load = url_for('static', filename='/images/no-img.png')
    else:
        image_load = image_filepath
    return render_template("index.html", image=image_load)


@app.route("/upload")
def upload():
    global image_filepath
    try:
        browse_img_file()
    except:
        pass
    finally:
        return redirect(url_for("index"))

index.html:

<div id="CONTENT">
    <p>Choose your image.</p>

    <div class="img">
        <image src="{{ image }}"></image>
    </div>

    <a href="{{ url_for('upload', image=image) }}">
        <button type="button" class="btn btn-primary">Upload an image</button>
    </a>

</div>

'''

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

i think the solution is to use <input> instead of <a> here:

<div id="CONTENT">
<p>Choose your image.</p>
<div class="img">
<image src="{{ image }}"></image>
</div>
 <!-- <a href="{{ url_for('upload', image=image) }}"> -->
<input type="file">
<button type="button" class="btn btn-primary">Upload an image</button>
</a>
</div>

source: W3Schools

over 4 years ago · Santiago Trujillo Report

0

When you are calling the 'upload' route, you are only returning the 'index' page. aren't you supposed to return the image_path too for jinja to load the 'image'?

return render_template("index.html", image=image_filepath)

I think returning this from the 'upload' route should work. enter image description here

enter image description here

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!