title: How do I get an image to show after clicking a button in Flask?
body: <p>I am trying to make a simple web application using Flask where two documents are selected and then a function is performed (the <code>dif()</code> function which calculates the lexical differences and results in an image) and then the image would be shown to the user. </p>
  
  <p>I was able to get the image to show if two documents were hard-coded into the function, but not with a user's file selection. I know my <code>upload.html</code> file is incomplete, but I am unsure what needs to be deleted/added/changed. </p>
  
  <p><strong>routes.py</strong></p>
  
  <pre><code>import io
  from app import app 
  from app.forms import LoginForm
  from pdf_diff.document_differences import dif
  from flask import request
  from flask import send_file
  
  
  #converts PIL image into a JPEG
  def serve_pil_image(pil_img):
      img_io = io.BytesIO()
      pil_img.save(img_io, 'JPEG')
      img_io.seek(0)
      return send_file(img_io, mimetype='image/jpeg')
  
  #shows the image from the dif function, using serve_pil_image
  @app.route('/test')
  def serve_img():
      file1 = "path/to/pdf1"
      file2 = "path/to/pdf2"
      result = dif(file1, file2)
      item = serve_pil_image(result)
      return item
  
  #trying to make user input work 
  @app.route("/upload", methods=["GET","POST"])
  def uploading():
      item = ''
      if request.method =="POST":
          file1 = request.form['file1']
          file2 = request.form['file2']
          if request.form['differences']:
              result = dif(file1, file2)
              item = serve_pil_image(result)
              return item
      return render_template('upload.html')
  </code></pre>
  
  <hr>
  
  <p><strong>upload.html</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Simple file upload using Python Flask&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form action="." method="post" enctype="multipart/form-data"&gt;
              Choose the first file: &lt;input type="file" name="file1" value="file one"/&gt;&lt;BR&gt;
              Choose the first file: &lt;input type="file" name="file2" value="file two"/&gt;&lt;BR&gt;
              &lt;input type="button" name="differences" value="Find Differences"&gt;
              &lt;input type="submit" name="similarity" value="Similarity Score (Percentage)"&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>document_differences.py</strong></p>
  
  <pre><code>import difflib
  import io
  from tika import parser
  import imgkit
  import docxpy
  from PIL import Image
  
  #function which finds lexical differences between two documents after converting them into text files
  def dif(filea, fileb):
  if filea.endswith('.pdf'):
      texta = pdf_to_text(filea)
  if fileb.endswith('.pdf'):
      textb = pdf_to_text(fileb)
  difference = difflib.HtmlDiff().make_file(texta, textb)
  difference_report = open('diff_table.html', 'w')
  difference_report.write(difference)
  difference_report.close()
  image = imgkit.from_file('diff_table.html', False)
  im = Image.open(io.BytesIO(image))
  return im
  </code></pre>
  
  <p>Nothing happens when I click the <em>Find Differences</em> button, but I'm pretty sure it's because my HTML file is wrong. Any guidance on how to properly format it to coincide correctly with the Python script would be much appreciated :)</p>