Python web app with Flask, updating image tag on view with button tag-CodePudding

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 >
        <image src="{{ image }}"></image>
    </div>

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

</div>

'''

CodePudding user response：

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

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

source: