title: How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?
body: <p>This Question is related to and inspired by <a href="https://stackoverflow.com/questions/38193605/how-to-updoad-in-old-browsers-ex-safari-5-1-4">How to updoad in old browsers (ex Safari 5.1.4)</a></p>
  <p>Given an <code>&lt;input type=&quot;file&quot;&gt;</code> element having a <code>files</code> property containing <code>File</code> objects which inherit from <code>Blob</code>, is it possible to create a <code>ArrayBuffer</code> and convert the <code>ArrayBuffer</code> to a <code>data URI</code> from a <code>Blob</code> or <code>File</code> object without using <code>FileReader</code>?</p>
  <p>Approaches have tried so far have been</p>
  <ul>
  <li><p>create a mock <code>WebSocket</code> with <code>.binaryType</code> set to <code>&quot;arraybuffer&quot;</code>, create a <code>MessageEvent</code> with <code>event.data</code> set to <code>File</code> object; result is <code>File</code> object at <code>onmessage</code> handler</p>
  </li>
  <li><p>set prototype of <code>File</code> to <code>ArrayBuffer</code>, <code>Uint8Array</code>; result is <code>Uncaught TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #&lt;ArrayBuffer&gt;()</code>, <code>Uncaught TypeError: Method get TypedArray.prototype.byteLength called on incompatible receiver [object Object]()</code></p>
  </li>
  <li><p>set <code>File</code> at <code>FormData</code> object, attempt to post request body to <code>&lt;iframe&gt;</code>, admittedly not well-conceived; result <code>Bad Request</code> at <a href="http://plnkr.co/edit/Ca7pNsmVhXpv8Us5v8hE?p=preview" rel="nofollow noreferrer">plnkr</a></p>
  </li>
  </ul>
  <p></p>
  <p>Expected result: Convert <code>Blob</code> and <code>File</code> objects to <code>TypedArray</code> then to <a href="https://www.rfc-editor.org/rfc/rfc2397" rel="nofollow noreferrer"><code>data URL</code></a>, or directly to <code>data URL</code></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form method=&quot;get&quot; entype=&quot;multipart/form-data&quot; target=&quot;binaryFrame&quot;&gt;
      &lt;input id=&quot;#avatar&quot; type=&quot;file&quot; name=&quot;file&quot; /&gt;
      &lt;input type=&quot;submit&quot; /&gt;
    &lt;/form&gt;
    &lt;iframe name=&quot;binaryFrame&quot;&gt;&lt;/iframe&gt;
    &lt;script&gt;
      var input = document.querySelector(&quot;input[type=file]&quot;);
      input.addEventListener(&quot;change&quot;, handleFiles, true);
      // see http://jsfiddle.net/adamboduch/JVfkt/
      var sock = new WebSocket(&quot;ws://mock&quot;);
      sock.binaryType = &quot;arraybuffer&quot;;
      sock.onerror = function(e) {
          console.log(&quot;sock error&quot;, e); // ignore, here
        }
  
      sock.onmessage = function(e) {
        console.log(&quot;socket message&quot;, e.data, e.data instanceof ArrayBuffer);
      };
  
      function handleFiles(evnet) {
        var file = event.target.files[0];
        sock.dispatchEvent(new MessageEvent(&quot;message&quot;, {
          data: file
        }));
        var data = new FormData();
        data.append(&quot;file&quot;, file);
        document.forms[0].action = data;
      }
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <hr />
  <p>See also <a href="https://stackoverflow.com/questions/11089732/display-image-from-blob-using-javascript-and-websockets">Display image from blob using javascript and websockets</a> , <a href="https://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript/">How can you encode a string to Base64 in JavaScript?</a> ; interestingly ironic as am now asking similar Question <a href="https://stackoverflow.com/questions/34302231/is-there-any-way-to-convert-the-file-to-an-arraybuffer-without-filereader-api">https://stackoverflow.com/questions/34302231/is-there-any-way-to-convert-the-file-to-an-arraybuffer-without-filereader-api</a> ; <a href="https://w3c.github.io/FileAPI/#slice-method-algo" rel="nofollow noreferrer"><code>Blob</code> <code>.slice()</code> method</a> , <a href="https://w3c.github.io/FileAPI/#readAsDataURL" rel="nofollow noreferrer"><code>FileReader</code> <code>.readAsDataURL()</code> method</a></p>