title: Flask - Calling python function that return image on button OnClick
body: <p>I'm trying to make a really simple web application that take images inputted by the client, then process it on server and then return the image. I want the image to be displayed on one of the div. I tried to use ajax but it doesn't work.
  I'm very new to flask and ajax, found the example that return text.</p>
  
  <p>This is my <strong>main.py</strong></p>
  
  <pre><code>import os
  #import magic
  import urllib.request
  from app import app
  from flask import Flask, flash, request, redirect, render_template, send_file
  from werkzeug.utils import secure_filename
  from fungsi import plot
  
  ALLOWED_EXTENSIONS = set(['txt', 'tif'])
  
  def allowed_file(filename):
      return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
  
  @app.route('/')
  def upload_form():
      return render_template('upload_.html')
  
  @app.route('/', methods=['POST'])
  def upload_file():
      if request.method == 'POST':
          # check if the post request has the files part
          if 'files[]' not in request.files:
              flash('No file part')
              return redirect(request.url)
          files = request.files.getlist('files[]')
          for file in files:
              if file and allowed_file(file.filename):
                  filename = secure_filename(file.filename)
                  file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
          flash('Files successfully uploaded')
          return redirect('/')
  
  @app.route('/foo', methods=['GET'])
  def foo():
      for root, dirs, files in os.walk(app.config['UPLOAD_FOLDER']):
          for file in files:
              if file.endswith('B4.TIF'):
                  fname4 = os.path.join(app.config['UPLOAD_FOLDER'], file)
              if file.endswith('B5.TIF'):
                  fname5 = os.path.join(app.config['UPLOAD_FOLDER'], file)
  
      bytes_obj = plot(fname4,fname5)
  
      return send_file(bytes_obj,
                       attachment_filename='plot.png',
                       mimetype='image/png')
  
  if __name__ == "__main__":
      app.run()
  </code></pre>
  
  <p><strong>html code</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;title&gt;Python Flask Multiple Files Upload Example&lt;/title&gt;
  
  &lt;head&gt;&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;/head&gt;
  
  
  &lt;body&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;h4&gt;Plot&lt;/h4&gt;
              &lt;button id='myButton' type="button"&gt;Click Me!&lt;/button&gt;
              &lt;div id="img"&gt;&lt;/div&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;h2&gt;Select file(s) to upload&lt;/h2&gt;
              &lt;p&gt;
                  {% with messages = get_flashed_messages() %}
                    {% if messages %}
                      &lt;ul class=flashes&gt;
                      {% for message in messages %}
                        &lt;li&gt;{{ message }}&lt;/li&gt;
                      {% endfor %}
                      &lt;/ul&gt;
                    {% endif %}
                  {% endwith %}
              &lt;/p&gt;
              &lt;form method="post" action="/" enctype="multipart/form-data"&gt;
                  &lt;dl&gt;
                      &lt;p&gt;
                          &lt;input type="file" name="files[]" multiple="true" autocomplete="off" required&gt;
                      &lt;/p&gt;
                  &lt;/dl&gt;
                  &lt;p&gt;
                      &lt;input type="submit" value="Submit"&gt;
                  &lt;/p&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;script&gt;
                  $(document).ready(function() {
                  $('#myButton').click(function() {
                      $.ajax({
                            type:"get",
                            url: "/foo",
                            dataType:"image/png"
                            success: function(response){
                             $("#img").html(response.html);
                            }
                    });
                  });
                  });
              &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>