Python/Flask - Display image from file input

Question

Plain and simple, I'm aiming to have a user input their name, and select an image from the file input. With some help with my previous question, I was able to get the name to carry over to the next page, but I'm unable to get a selected image to display.

Right now, when filled out, the name and image file name are provided. Hoping to get the image file to actually display the image.

Home page...

Display page...

Here is my current code:

Home.html

{% extends 'base.html' %}
{% block head %}
<title>Home Page</title>
{% endblock %}
{% block body %}

  <div class="content-container">
    <form action="{{ url_for('result') }}" method="post">
      <h2>Input your name:</h2>
      <input type="text" class="user-input user mb-3" name="user">
      <h2>Select your image:</h2>
      <input type="file" accept="image/*" class="form-control-file"
             id="formControlFile1" name="image">
      <input class="btn btn-outline-primary" type="submit" value="Submit">
    </form>
  </div>

{% endblock %}

Result.html

{% extends 'base.html' %}
{% block head %}
<title>Result Page</title>
{% endblock %}
{% block body %}

  <div class="content-container">
    <h2>{{ name }}</h2>
    <h2>{{ image }}</h2>
  </div>

{% endblock %}

Main.py

from flask import Flask, render_template, request, url_for, redirect

app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        user = request.form["user"]
        image = request.form["image"]
        return redirect(url_for('result', name=user, image=image))
    return render_template('home.html')


@app.route("/result", methods=['GET', 'POST'])
def result():
    name = request.form.get('user')
    image = request.form.get('image')
    return render_template("result.html", name=name, image=image)


if __name__ == "__main__":
    app.run()

So, yeah, hopefully I explained that easy enough. User inputs name, selects image, and the goal is for the name to show and image to display on the result page. Thanks to anyone that can provide this lowly soul with guidance.

Image does not work like that. Either you need to base64 encode it and send or save the image to server static location and send it via <img href> — Epsi95
– Epsi95, Commented Jul 2, 2021 at 15:19
@Epsi95, or save image in some private folder and proxify it through some path. — Olvin Roght
– Olvin Roght, Commented Jul 2, 2021 at 15:20
I am not quite sure about what proxify means, but yes you can save the image and send or send the base64encoded version as <img src="data:image/png;base64, {base64 string}" alt="" />, also to access the image in your flask app use request.files not request.form — Epsi95
– Epsi95, Commented Jul 2, 2021 at 15:27

Владислав Небеснюк · Accepted Answer · 2021-07-02 16:00:32Z

You can try something like that

Your form's enctype should be multipart/form-data

{% extends 'base.html' %}
{% block head %}
<title>Home Page</title>
{% endblock %}
{% block body %}

  <div class="content-container">
    <form action="{{ url_for('result') }}" method="post" enctype="multipart/form-data">
      <h2>Input your name:</h2>
      <input type="text" class="user-input user mb-3" name="user">
      <h2>Select your image:</h2>
      <input type="file" accept="image/*" class="form-control-file"
             id="formControlFile1" name="image">
      <input class="btn btn-outline-primary" type="submit" value="Submit">
    </form>
  </div>

{% endblock %}

You need to use request.files and decode in base64

import base64
from flask import Flask, render_template, request, url_for, redirect

app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        user = request.form["user"]
        image = request.files['image']  # get file
        image_b64 = base64.b64encode(image.read()).decode('utf-8')
        return redirect(url_for('result', name=user, image_b64=image_b64))
    return render_template('home.html')


@app.route("/result", methods=['GET', 'POST'])
def result():
    name = request.form.get('user')
    image_b64 = request.form.get('image_b64')
    return render_template("result.html", name=name, image_b64=image_b64)


if __name__ == "__main__":
    app.run()

You should change your HTML to convert image from base64

{% extends 'base.html' %}
{% block head %}
<title>Result Page</title>
{% endblock %}
{% block body %}

  <div class="content-container">
    <h2>{{ name }}</h2>
    <img src="data:image/png;base64, {{ image_b64 }}">
  </div>

{% endblock %}

Collectives™ on Stack Overflow

Python/Flask - Display image from file input

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related