title: Python Flask App - Upload Image and Display
body: <p>Just getting started with Python Flask App and working with HTML.</p>
  <p>I am trying to build a simple image upload page that will display the uploaded image.  I have been able to successfully upload and save the file just not display it.
  HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Upload Face with ID&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col&quot;&gt;
  
      &lt;h1&gt;Upload Face (filename = face's name (i.e. John_Smith.jpg)&lt;/h1&gt;
            &lt;hr&gt;
  
      &lt;form action=&quot;/upload-image&quot; method=&quot;POST&quot; enctype=&quot;multipart/form-data&quot;&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
                &lt;label&gt;Select image&lt;/label&gt;
                &lt;div class=&quot;custom-file&quot;&gt;
                  &lt;input type=&quot;file&quot; class=&quot;custom-file-input&quot; name=&quot;image&quot;
  
      id=&quot;image&quot;&gt;
                  &lt;label class=&quot;custom-file-label&quot; for=&quot;image&quot;&gt;Select image...&lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Upload&lt;/button&gt;
      &lt;/form&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;img src=&quot;{{ uploaded_image }}&quot;&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>FLASK APP</p>
  <pre><code>import os
  
  from flask import Flask, redirect, jsonify, request, url_for, render_template, flash
  
  app = Flask(__name__)
  
  app.config[&quot;IMAGE_UPLOADS&quot;] = &quot;C:/Flask/Upload/&quot;
  
  
  @app.route(&quot;/&quot;)
  def home():
      return render_template(&quot;index.html&quot;)
  
  
  # Route to upload image
  @app.route('/upload-image', methods=['GET', 'POST'])
  def upload_image():
      if request.method == &quot;POST&quot;:
          if request.files:
              image = request.files[&quot;image&quot;]
              # print(image + &quot;Uploaded to Faces&quot;)
              # flash('Image successfully Uploaded to Faces.')
              image.save(os.path.join(app.config[&quot;IMAGE_UPLOADS&quot;], image.filename))
              filename = os.path.join(app.config[&quot;IMAGE_UPLOADS&quot;], image.filename)
              print(&quot;stored as:&quot; + filename)
              return render_template(&quot;upload_image.html&quot;, uploaded_image=filename)
      return render_template(&quot;upload_image.html&quot;)
  
  
  if __name__ == &quot;__main__&quot;:
      app.run()
  </code></pre>
  <p>I have tried to create a separate html for just displaying the image by returning the render_template and passing the uploaded_image=filename.</p>
  <p>Ideally I would just like to display the uploaded image at the top of the page or below the submit button once uploaded.</p>
  <p>Any help would be much appreciated.</p>
  <p><a href="https://i.stack.imgur.com/fMa3k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fMa3k.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/81QNh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/81QNh.png" alt="enter image description here" /></a></p>