title: How to issue a post to a json rest api with a base64 encoded html input from a SPA
body: <p>I'm developing an application with a SPA as frontend and a json rest API as backend. There's a rest endpoint for creating an entity with attributes and a binary file, for example a research papaer with several properties and a pdf file. The content of the file would just be a text property with the binary data encoded in base64.</p>
  
  <p>I'd like the user to be able to complete the information and select the file an html input file, then create the json call with the contents of pdf file encoded in base64, all this done from the client.</p>
  
  <p>The idea would be to issue an http post like the following from the client, encoding a file that the user selected from the browser:</p>
  
  <pre><code>POST /api/paper HTTP/1.1
  Host: my_web_service.com
  Content-Type:application/json
  Accept:application/json 
  body:
  {
    "title": "paper title",
    "author": "author name",
    "pdf_content": "ZkxhQwAAACIQABAAAAUJABtAA+gA8AB+W8FZndQvQAyjv..."
  }
  </code></pre>
  
  <p>Is it possible? Some js code that does something like that would be much appreciated.</p>
  
  <p>Note: I'm not asking how to encode it in base64, but how to work with the binary data from the client. I found <a href="https://www.html5rocks.com/en/tutorials/file/dndfiles/" rel="nofollow noreferrer">this article</a> about the HTML5 <a href="https://www.w3.org/TR/file-upload/" rel="nofollow noreferrer">File API</a>. From this article I understand that using <code>FileReader.readAsDataURL(Blob|File)</code> I can get the base64 enconded contents of the file chosen with thw html input.</p>