html for loop and passing the filename in python flask

Question

I am creating cards for every image in a directory using a for loop in html. My goal is to allow users to input a new filename, click submit and image file displayed in the card, will be renamed. I can pass the text input from the html to the flask app, but HOW do I associate the text input with the corresponding image file displayed in the card? I need to know which image the user is attempting to rename. How can I create a variable for the filename in the html for loop to pass across to the python flask route.

{% extends "base.html" %}
{% block title %}NameTag{% endblock %}
{% block content %}

<div class="alert alert-warning" role="alert">
  NameTag - This feature allows the user to input NameTags for cropped faces.  Once faces are NameTagged, they are added into the Faces database.
</div>

<section class="row">
  {% for image in images %}
    <div class="card" style="width: 18rem;">
      <img src = "{{ url_for('static', filename='nametag/' + image) }}">
      <div class="card-body">
        <form method="POST">
        <input name="text">
        <input type="submit">
        </form>
      </div>
    </div>
  {% endfor %}
</section>

@app.route("/NameTag")
def name():
    images = os.listdir(os.path.join(app.static_folder, "nametag"))
    return render_template('nametag.html', images=images)

@app.route('/NameTag', methods=['POST'])
def nametag_form_post():
    text = request.form['text']
    processed_text = text.upper()
    # get image filename from html card and rename file to user text input
    

    return processed_text

score 2 · Accepted Answer · answered Aug 21 '20 at 10:54

You can just add the filename as a hidden field in the form

<section class="row">
  {% for image in images %}
    <div class="card" style="width: 18rem;">
      <img src = "{{ url_for('static', filename='nametag/' + image) }}">
      <div class="card-body">
        <form method="POST">
        <input type="hidden" name="filename" value="{{ image }}">
        <input name="text">
        <input type="submit">
        </form>
      </div>
    </div>
  {% endfor %}
</section>

Then you'd access it just like you already do for text in nametag_form_post with filename = request.form['filename']. You could also use a dynamic URL but I'm not sure what that would buy you here over a hidden field.

score 1 · Answer 2 · answered Aug 21 '20 at 10:54

1

Add a hidden form field and populate it with the file name (when you render the template using jinja2)

 <form method="POST">
    <input name="text">
    <input type="submit">
    <input type="hidden">
 </form>

answered Aug 21 '20 at 10:54

balderman

22,927
7
34
52

score 0 · Answer 3 · answered Aug 21 '20 at 11:22

Essentially the solution was a combination of @balderman and @roganjosh (using hidden input type and passing that across to the flask side)

<section class="row">
  {% for image in images %}
    <div class="card" style="width: 18rem;">
      <img src = "{{ url_for('static', filename='nametag/' + image) }}">
      <div class="card-body">
        <form method="POST">
        <input type="hidden" name="file" value="{{ image }}">
        <input name="text">
        <input type="submit">
        </form>
      </div>
    </div>
  {% endfor %}
</section>

@app.route('/NameTag', methods=['POST'])
def nametag_form_post():
    text = request.form['text']
    file = request.form['file']
    processed_text = text.upper()
    # get image filename from html card and rename file to user text input
    os.rename("static/nametag/" + str(file), UPLOAD_FOLDER_FACES + text + ".jpg")
    flash('Face NameTag Saved & Uploaded to Database successfully.')
    return render_template("nametag.html")

html for loop and passing the filename in python flask

3 Answers3