How can I send binary data to server as a file upload?

Question

I have the base64-encoded string of an image. It gets to me from another site, with an iframe and the data from postMessage . I know this sounds horrible, but it's an integration I can't get around for reasons beyond my control.

I'm trying to get a proof-of-concept working in a PHP test file.

I have code like this:

<div id="binary"><?=$file;?></div>
<script type="text/javascript">
var oReq = new XMLHttpRequest();
oReq.open("POST", "/endpoint.php", true);
oReq.setRequestHeader("Content-Type","application/octet-stream");
oReq.setRequestHeader("X-File-Name","abc.jpg");
oReq.setRequestHeader("X-Requested-With", "XMLHttpRequest" );
// This fails whether or not 'binary' is base64-encoded and decoded here
// or when `binary` is already actually binary
oReq.send(document.getElementById( 'binary' ).innerHTML );
</script>

$file is the actual contents of the file. This will error in Firefox, but we only care about Chrome for this project, since the iframe is coming from an instance of embedded webkit.

Anyway this data sends up and for some reason is always a corrupt image. I've also tried making the file printed into the div be base64-encoded ( which is actually valid HTML ), and then decoding it before sending up. I just can't come up with a combo of encoding/decoding/printing that makes it work on the server side.

I also tried changing send to sendAsBinary via:

Uploading a binary string in WebKit/Chrome using XHR (equivalent to Firefox's sendAsBinary)

Any ideas?

Answer 1

我无法通过服务器路由使它正常工作，所以我最终向服务器传递了一个标志，说“嘿，这是base64_encoded”，事实证明它不需要太多的返工，所以谢谢@mr.VVoo

Answer 2

Firstly, if possible, don't store the file contents in a <div> (or anywhere in the DOM, for that matter). If you can, it'd be better for it to be <script>var myfile="..."</script> . If you simply must store it in the DOM, it's got to be base64, for sure. And don't use innerHTML to access the contents, use textContent instead.

Secondly, I don't think you need binary in this case, because you're not going to (AFAIK) transport the binary data from your iframe to your main page, you're going to have to encode it as a string (the base64 encoding), and once it's a string, it's safe to transmit that as a standard value, and the base64-decode it on the receiving end (the PHP).

edit: saw your comment above about needing to make it as much like a normal file upload as possible. I'd suggest then that THIS use-case needs a separate end-point, which receives the base64 string only, does nothing else, and then it reconstitutes the file, and then it forwards it on to the other end-point.

edit #2: you might be able to put the file contents into a canvas element, and then get them back out as a Blob, using toBlob() . to get the contents into a canvas, you'll have to first make a dataURL from your base64 encoding (basically, prepending like "data:image/jpg;base64," ahead of your base64 content), assign that dataURL as the src of an <img> , then drawImage() that from the <img> to your <canvas> .