title: How to reconstruct a blob for an image from a binary string (client side hidden form field) in Google Apps Script
body: <p>I am trying to use Google HTMLService to process a form from the client side. The tricky part is that I want to capture a pasted image (from clip-board) in the form, send it to the server side and save it in the DriveApp. </p>
  
  <p>On the client side, I think I was able to capture the pasted image based on this page: <a href="http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/" rel="nofollow">http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/</a></p>
  
  <p>And my client side code looks like this:</p>
  
  <pre><code>function pasteHandler(e) {
     // We need to check if event.clipboardData is supported (Chrome)
     if (e.clipboardData) {
        // 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("image") !== -1) {
                 // 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 reader = new FileReader();
                 reader.onload = function(e) {
                   document.getElementById("summaryImage").value= reader.result;
                 }
                 reader.readAsBinaryString(blob);
  
                 // The URL can then be used as the source of an image
                 createImage(source);
              }
           }
        }
     // If we can't handle clipboard data directly (Firefox), 
     // we need to read what was pasted from the contenteditable element
     } 
  }
  </code></pre>
  
  <p>So the change is only that I used a FileReader to read the blob and save it into a hidden field in the form. </p>
  
  <pre><code>&lt;input type="hidden" name="summaryImage" id='summaryImage' value=''&gt;
  </code></pre>
  
  <p>I think this part is working fine, as I could display the image in the client side and the hidden field is also populated with a byte stream.</p>
  
  <p>What I am unsure about is how to pick up the value of the hidden field, now being a "Binary String" and save it as a proper PNG file in Google Drive and / or view it.</p>
  
  <p>On the server side, I was able to save any uploaded files (using input file form element), but note the binary string passed by the hidden field. </p>
  
  <p>I have tried things like below:</p>
  
  <pre><code>blob = form.summaryImage;
  DriveApp.createFile('TRIFILE2.png', blob, 'image/png');
  </code></pre>
  
  <p>This does create a file, but cannot be viewed as png. If I open it in Google Drive, it shows as below. I suppose it knows this is a PNG file, but what's the correct way to convert it? </p>
  
  <pre><code>‰PNG
  
  
  IHDR   y   2     Þ  R    IDATx í]mLTYš~Øl€I ÃF  ´šX ‰|Dc H(œ    TÿàcÒÅPkuÂGÿ°è B'*ì: èHÖ    =ÂàØà¸É”ýc¨ùa &amp;–M75i„ ]0ÓR&amp;’¢W£`RZ› ÅA·
  LÒ`²¹›s?ªî­ïÂ[x©{ªÛÔ­óñž÷}žûž{îåT=i×JJ ÐWJ# Æ\ %9¥) þ!Åã£á ’¬Š“€f²
  h¦$S’U€€
  B¤™LIV  * ‘f2%Y  ¨ DšÉ”d   ‚ i&amp;S’U€€
  B¤™LIV  * ‘f2%Y  ¨ DšÉ”d   ‚ i&amp;S’U€€
  B¤™LIV  * ‘f2%Y  ¨ DšÉ”d   ‚ i&amp;S’U€€
  B¤™LIV  * ‘f2%Y  ¨ DšÉ”d   ‚ i&amp;S’U€€
  B¤™LIV  * 1 a ú;^)N4 ®Sœ`  %™’¬  T "ÍdJ²
   PAˆ4“)É*@@ !ÒL¦$«   „H3™’¬  T "ÍdJ²
   PAˆ4“)É*@@ !ÒL¦$«   „H3™’¬  T "ÍdJ²
   PAˆ4“)É*@@ !ÒL¦$‹ pc -
  </code></pre>
  
  <p>I also tried Utilities.newBlob() function, but cannot figure out how to make a correct Blob from the binary string. </p>