How can I ask user to upload image to an html page, insert this image to an sqlite3 table using flask, and then display this image using jinja?

Question

so far this is what I came up with

#html ask user to input information including an image

    <div class="form-group">
        <input autocomplete="off" autofocus class="form-control" name="name" placeholder="name" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="subject" placeholder="subject" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="experience" placeholder="experience" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="phone" placeholder="puone-number" type="number">
    </div>
    <div class="form-group">
        <input type="file" name="pic" id="pic">
    </div>
    <button class="btn btn-primary" type="submit">Register</button>
</form>

flask

@app.route("/register", methods=["GET", "POST"])
def register():
    """Show teacher registering menu"""
    if request.method == "GET":
        return render_template("register.html")

    else:
        # get the user input
        name = request.form.get("name")
        sub = request.form.get("subject")
        exp = request.form.get("experience")
        phone = request.form.get("phone")
        
        f = request.files['pic']
        pic = f.save(secure_filename(f.filename))
        
        if not name or not sub or not exp or not phone:
            return "404"
        # insert in the database
        sql = "INSERT INTO teachers (name, sub, exp, phone, pic) VALUES (?, ?, ?, ?, ?)"
        db.execute(sql, name, sub, exp, phone, pic)
        # inform the user for the success of the process
        return render_template("success.html")

showing the results on html

<div>
{% for i in query %} 
   
    <div class="media bg-primary text-white">
      <img class="align-self-end mr-3" src={{ i['pic'] }} alt="Generic placeholder image">
      <div class="media-body">
        <h5 class="mt-0">Mr. {{ i['name'] }}</h5>
        <ul class="list-group list-group-flush text-dark">
          <li class="list-group-item">subject: {{ i['sub'] }},</li>
          <li class="list-group-item">experience: {{ i['exp'] }},</li>
          <li class="list-group-item">Contact number: {{ i['phone'] }}</li>
        </ul>
      </div>
    </div>
    <br>
{% endfor %}
</div>

but right now every time I try it I find the value of the image column in my sql table to be NULL. How can I fix that

Answer 1

pic = f.save(secure_filename(f.filename))

The save method returns None, so here pic will be None.

I think you intended to write its filename to the database, so perhaps change this to:

pic = secure_filename(f.filename)
f.save(pic)

Now pic is the filename on your server, so you just need to reconstruct this wherever the file is viewed.

Of course be aware that this uses the filename of the file which was uploaded by the user. You may wish to avoid this, incase of duplicates or just for cleanliness. See this other answer I wrote regarding that.

EDIT: Regarding your template.

When it comes to loading the picture in the template, let's assume the filename came through as image.jpg, and you use your exisiting code:

<img src={{ i['pic'] }}>

You could view the source of the rendered page, and see:

<img src=image.jpg>

Two problems with this:

• that attribute should have quotes (<img src="image.jpg">)
• that's trying to load the file from whichever path is rendered in the browser, so if the URL was http://example.com/subdir/ it's looking for the image at http://example.com/subdir/image.jpg. This can also be verified in the Network tab of your browsers dev tools.

The solution, build the URL with flask's url_for function:

<img src="{{ url_for('static', filename=i['pic']) }}">

This, of course, assumes that you've saved the file to the static directory on your server. You may wish to ensure this in the python code:

import os
# ...
pic = secure_filename(f.filename)
f.save(os.path.join('static', pic))