Python/Flask - Display image from file input

user_6075090 0
Viewed 1061

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... Home Page

Display page... Result 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.

flask html python
1 Answers

You can try something like that

  1. 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 %}
  1. 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()
  1. 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 %}
user_138542510
Related