Can we add binary raw data to a <form>?

Question

Is it possible to add binary raw data to a form, e.g. in this data field:

<form action="/upload" method="post">
<input type="hidden" id="data" />
<input type="submit" />
</form>

?

In my use case, I want to export an image from a canvas to JPEG with toDataURL, then decode the base64 to binary data, add the binary data to the <form>, which will be ready for submitting.

Why do I want to not just post the base64-encoded data? Because I would like to save 1/3 of uploading time for client / bandwidth for server, and it is well known base64 is bigger than binary data of a factor 1.333.

Answer 1

If this is your form

<form action="something.php"  method="post" enctype="multipart/form-data">
  <input type="text" name="firstname" value="Peter">
  <input type="text" name="lastname" value="Quill">
  <input type="file" name="photo">
  <input type="submit" value="Submit">
</form> 

This is how it gets sent

------WebKitFormBoundarybHHp9cSVfgrymPhN
Content-Disposition: form-data; name="firstname"

Peter
------WebKitFormBoundarybHHp9cSVfgrymPhN
Content-Disposition: form-data; name="lastname"

Quill
------WebKitFormBoundarybHHp9cSVfgrymPhN
Content-Disposition: form-data; name="photo"; filename=""
Content-Type: application/octet-stream


------WebKitFormBoundarybHHp9cSVfgrymPhN--

Every form field's value is enveloped the boundary is calculated intelligently by the browser for that it goes over the entire form textbox, textareas etc (including raw file bytestream of the file inputs) all this in order to avoid Delimiter collision.Browsers will prefix the boundary with their respective vendor prefix like webkit here but in the end it always be a reliable delimiter.

Now even if you get your hands on this low level assembling of data, creating a really reliable delimiter will be a hefty task if you happen to have file inputs to worry about.That's why you should let browser handle such stuff the suggested Formdata based solution goes well with this.

enctype='multipart/form-data' is the only mechanism to send data regardless of it's nature all other enctype (application/x-www-form-urlencoded,text/plain) just support ASCII transfer.entype(s) are essentially a way of telling which scheme the browser should use to submit a form but the scheme itself isn't limited to mere forms as you can see Formdata using the same.