title: Upload file to server using paste action
body: <p>I have been trying to upload an image file captured from the clipboard of user to a server (web page implemented through Flask). I have the following code so far (almost verbatim lifted from another Stack Overflow post):</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  // We start by checking if the browser supports the 
  // Clipboard object. If not, we need to create a 
  // contenteditable element that catches all pasted data 
  
  // Add the paste event listener
  console.log(&quot;Start&quot;);
  if (window.addEventListener) {
      console.log(&quot;new event listener&quot;);
      window.addEventListener(&quot;paste&quot;, pasteHandler);
      }
  else if (window.attachEvent) {
      console.log(&quot;old event listener&quot;);
      window.attachEvent(&quot;onpaste&quot;, pasteHandler);
      }
  console.log(&quot;End&quot;);
   
  /* Handle paste events */
  function pasteHandler(e) {
      console.log(&quot;in paste handler&quot;);
     // We need to check if event.clipboardData is supported (Chrome)
     if (e.clipboardData) {
          console.log(&quot;in clip data&quot;);
        // Get the items from the clipboard
        var items = e.clipboardData.items;
        if (items) {
           // Loop through all items, looking for any kind of image
           for (var i = 0; i &lt; items.length; i++) {
              if (items[i].type.indexOf(&quot;image&quot;) !== -1) {
                  console.log(&quot;image exists in clipboard&quot;);
                 // We need to represent the image as a file,
                 var blob = items[i].getAsFile();
                 // and use a URL or webkitURL (whichever is available to the browser)
                 // to create a temporary URL to the object
                 var URLObj = window.URL || window.webkitURL;
                 var source = URLObj.createObjectURL(blob);
                 var form = document.forms['addbug'];
                 var fd = new FormData(form);    
                 fd.append('attach',blob);
                 console.log(&quot;image added to form&quot;);
                 }
              }
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>The part that I am struggling with is saving the captured stream on the server. I am trying to use the following python code to store the file on server:</p>
  <pre><code>if form.validate_on_submit():
      print('in submit')
      if request.method == 'POST':
          print('in post')
          if 'attach' in request.files:
              print('in attach')
              upload_file = request.files['attach']
              print('upload file = '+str(upload_file))
              print(upload_file.filename)
              if allowed_file(upload_file.filename):
                  filename =  secure_filename(upload_file.filename)
                  upload_file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
                  file_loc = os.path.join(app.config['UPLOAD_FOLDER'], filename)
  </code></pre>
  <p>What I get with the last print statement is:</p>
  <pre><code>upload file = &lt;FileStorage: '' ('application/octet-stream')&gt;
  </code></pre>
  <p>which sounds like it is a stream not a file. I think that the upload_file.save does not work as it does not recognize the input as a file, but I have no idea how to (maybe) convert the octet-stream data into a readable file. Or maybe I need to read the blob differently instead of using getAsFile()? Any ideas?</p>