title: FileReader losing data when reading PDF
body: <p>I have the constraint of sending data to a server in JSON format only, and I need to send a PDF file together with other form data in the JSON. I though I could make a string from it with base64 like in <a href="https://stackoverflow.com/a/37699333/2197181">this solution</a> I found on SO:</p>
  
  <pre><code>let data = {foo: 1, bar: 2};
  let reader = new FileReader();
  reader.readAsDataURL(pdf);
  reader.onload = () =&gt; {
    data.file = reader.result;
    $.ajax({type: 'POST', dataType: "json", data: JSON.stringify(data), ...});
  }
  </code></pre>
  
  <p>But it happened that <code>reader.result</code> does not contain the whole PDF (whether I save it to file instead of sending, or get it back from the server). In a text editor the content is the same, but a binary editor says that some bytes are missing. My browser can load it as a pdf and the title shows, but the page is blank. </p>
  
  <p>I also tried <code>reader.readAsBinaryString</code> and transform to base64 myself with <code>btoa</code>, but same result.</p>
  
  <p><strong>Edit</strong>: CodePen example: <a href="https://codepen.io/jdelafon/pen/eRWLdz?editors=1011" rel="noreferrer">https://codepen.io/jdelafon/pen/eRWLdz?editors=1011</a></p>
  
  <p><strong>Edit</strong>: to verify, I did this:</p>
  
  <pre><code>let reader = new FileReader();
  reader.readAsBinaryString(pdf);
  reader.onload = () =&gt; {
      let blob = reader.result;
      let file = new Blob([blob], {type: 'application/pdf'});
      let fileURL = window.URL.createObjectURL(file);
      // make it display in &lt;embed&gt;
  };
  </code></pre>
  
  <p>The body of the pdf is empty. If I replace <code>file</code> by the original <code>pdf</code>, it gets displayed entirely. So FileReader loses data in the process.</p>
  
  <p><a href="https://i.stack.imgur.com/0RL8d.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0RL8d.png" alt="It knows the title and number of pages, but the body of each page is empty"></a></p>
  
  <p>Is there a better way? Is it an encoding issue with <code>FileReader</code>?</p>
  
  <p>I also though about using FormData like this:</p>
  
  <pre><code>let data = {foo: 1, bar: 2};
  let fd = new FormData();
  fd.append('file', pdf);
  data.file = btoa(fd);
  $.ajax({type: 'POST', dataType: "json", data: JSON.stringify(data), ...});
  </code></pre>
  
  <p>But now when I fetch the data back from the server, JS has no idea that it represents a FormData object, so I don't know how to get the file back for display in a browser. Is it possible?</p>