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 — Epsi95, Jul 02 '21 at 15:19
@Epsi95, or save image in some private folder and proxify it through some path. — Olvin Roght, Jul 02 '21 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 ``, also to access the image in your flask app use `request.files` not request.form — Epsi95, Jul 02 '21 at 15:27

score 5 · Answer 1 · answered Jul 02 '21 at 16:00

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 %}

Python/Flask - Display image from file input

1 Answers1

Linked