title: Flask: how to handle and save the image send by AJAX post method
body: <p>In my project I use Flask framework and JS on the front end, now I want to use AJAX post method to send a image to server side and save the image. <br>
  So far, based on some searching, I use FileReader() API to read the file in and generate a thumbnail on the web, this part can work well now. Then I want to continue sending the image to the server, but blocked here. I use <code>$.AJAX</code> post method to send the image.<br> the js function goes as following: </p>
  
  <pre><code>var files = [];
  function handleFileSelect(event) {
      var selectedFile = event.target.files[0];
      var reader = new FileReader();
      var imgtag = document.getElementById("currentImage");
      imgtag.title = selectedFile.name;
      reader.onload = function(event) {
        imgtag.src = event.target.result;
        object = {};
        object.filename = selectedFile.name;
        object.data = event.target.result;
        files.push(object);
      };
      reader.readAsDataURL(selectedFile);
   };
  
  $(document).ready(function(){
      $("form").submit(function() {
          alert("good");
          $.each(files, function(index, file) {
          $.ajax({url: "/image",
              type: 'POST',
              data: {filename: file.filename, data: file.data},
          });      
       });
       });
  }); 
  </code></pre>
  
  <p>and since I don't know how to handle and get the image file, so the server side code I just try <code>request.files</code> as following:</p>
  
  <pre><code>@app.route('/image',methods=['POST'])
  def image_upload():
      file = request.files['files']
      print file.filename
  </code></pre>
  
  <p>I debug that the '/image' can get the post request, but have no idea about how to get the image from <code>request</code>. </p>
  
  <p>Edit:
  the HTML form part goes as following:</p>
  
  <pre><code>&lt;form enctype="multipart/form-data"&gt;
  &lt;input type="file" id="files" name="files"  onchange="handleFileSelect(event)"/&gt;
  &lt;img id="currentImage" src="/static/1.jpg" alt="Mountain View" style="width:304px;height:228px;"&gt;
  &lt;input type="submit" value="Analyse the image v2"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Edit II:
  Find the solution in other ticket, the FormData object is the right answer in the following link:
  <a href="https://stackoverflow.com/questions/18334717/how-to-upload-a-file-using-an-ajax-call-in-flask">How to upload a file using an ajax call in flask</a></p>