title: How to embed a Base64 encoded PDF data URI into a HTML 5 `<object>` data attribute?
body: <p>So in my application, users have the option to upload a file to an <code>&lt;input type = "file" id = "my-file"&gt;</code> (HTML 5 File input).  I can subsequently grab this file using the following Javascript:</p>
  
  <pre><code>var files = $("#my-file").files;
  var file = files[0];
  </code></pre>
  
  <p>Can I somehow use this <code>var file</code> as the <code>data</code> in an <code>&lt;object&gt;</code> tag?  Here is an example of an object tag where the PDF is grabbed by hitting a URL and contacting the server.</p>
  
  <pre><code>&lt;object data="data/test.pdf" /*&lt;-- I want the var file here */ type="application/pdf" width="300" height="200"&gt;
  &lt;/object&gt;
  </code></pre>
  
  <p>How can I accomplish this?  Please note, I must support Internet Explorer 11.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I've tried something that ultimately ended in failure.  I converted the PDF to a data-uri using FileReader and then used that in the <code>data</code> attribute of the <code>&lt;object&gt;</code> tag, which renders perfectly in Chrome but not at all in Internet explorer.</p>
  
  <pre><code>var files = $(e.currentTarget.files);
  file = files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
      var data = reader.result;
      console.log(data);
      $("#content").prepend('&lt;object id="objPdf" data="'+data+'" type="application/pdf"&gt;&lt;/object&gt;');
  };
  reader.readAsDataURL(file);
  </code></pre>
  
  <p>Where the reader data comes out looking like:</p>
  
  <pre><code>data:application/pdf;base64,JVBERi0xLjQKJe...
  </code></pre>
  
  <p><a href="https://msdn.microsoft.com/en-us/library/cc848897(v=vs.85).aspx" rel="noreferrer">Here is the reason PDF's don't work with this approach in Internet Explorer</a> (images only)...so sad :(</p>
  
  <p><strong>UPDATE 2:</strong></p>
  
  <p>Tried <a href="https://github.com/mozilla/pdf.js" rel="noreferrer">pdf.js</a> with some success...it displays the PDF on the page, although it is incredibly slow (5 seconds for a single page) in Internet Explorer 11.  It also only displays one page at a time, whereas the <code>&lt;object&gt;</code> tag displayed all pages instantly in a nice scrollable container.  While this is an extreme fallback option, I'd like to not go down this route.</p>
  
  <p>Anyone have any other idea as to how I can preview the PDF's that the user uploads directly in the webpage?</p>