We Keep Coding

Websockets file upload is corrupted (or wrongly encoded) - PHP and JS

I´m working on websocket scripts in PHP and JS and have issue with saving a file (img)
Sending from JS:
$('#frmChatFile').on("submit",function(event){
event.preventDefault();
var file = document.querySelector('input[type="file"]').files[0];
websocket.send(file, Blob);
});
Saving in PHP
socket_recv($newSocketArrayResource, $socketData, 61440, 0);
file_put_contents('test.jpg', $socketData);
It saves the file, but it is corrupted, or wrongly encoded...
The uploaded picture is slightly smaller (few bytes) and there is nothing readable in hexeditor (while in original I can read header and so on)
What am I missing? Any flag or something? Thank you very much :)
(fopen (w/wb), fwrite, fclose does exactly the same)

Most likely your data/image, is encoded in a frame as defined by RFC6455, so you are reading that frame in PHP with socket_recv. In fact all data sent from JS via websocket is allways encoded in frames.
You have to decode these frames in order to get your data back.
Have a look at https://github.com/napengam/phpWebSocketServer/blob/master/server/RFC6455.php
There you will find the decode function.
Good luck.

js, jquery image to JSON -> JSON to image

I am probably puting a bad query to google however i can not find proper solution.
I have an mobile app (client) that would allow admin to load images from server. Because all the data from server comes via JSON file, my idea is convert on server side an image to json object (ie with help of base64). Using this solution i might get multiple images and additional data in one JSON file. Later i would inject b64 encrypted image to image via javascript in mobile app.
I can also use jquery.
The questions are:
do i need encrypt image to base64 before changing it to json? (i'd do that via php). i guess i need to do this because of escape characters in pure image files.
how to decrypt from base64 to json/string variable in javascript/jquery?
how to put binary image (decrypted from base64) to an image. Ie vie var img = new Image()
Any answer to this questions would be appreciated.
Or maybe there is a better solution?

How to embed a large image with data uri

I currently have a large base64 image uri (Received via external JS script) and want to embed it into the HTML page. I did this successfully locally but now that it pulls it from another place it seems to not work, it loads part of the image then says "Image corrupt or truncated. URI in this note truncated due to length." This occurs both just in the <img> tag and using <canvas>, is there any way to load large images from uri? Or another way to display images from a base64 string?
What doesn't make sense is it works fine if I specify the base64 string as a javascript variable, but when I include it as a variable in an external script, it gives this error. Would breaking up the string then putting it back together fix this?

You shouldn't use data-URLs for huge files.
You could try to convert your base64 URL into a blob object and the blob object into a temporary blob url using the following javascript function:
function dataurlToBlobUrl(url){
var parts = url.split(',',2);
var mime = parts[0].substr(5).split(';')[0];
var blob = b64toBlob(parts[1],mime);
return URL.createObjectURL(blob);
}
And the b64toBlob function from here:
https://stackoverflow.com/a/16245768/5406901
Just make sure to use "URL.revokeObjectURL" whenever you no longer need the blob url.

Creating a pdf file from mpdf string output?

I'm using mPDF server side to create a pdf file. It works okay if I output the file to the server, however, I would like to return a string back to the client and build a pdf file from it which I can then use like any normal file from a file input.
server side, the (simplified) code is
$output_dest = 'S';
$content = $mpdf->Output($post_data->fileName, $output_dest);
//$mpdf->Output($post_data->fileName, 'F'); //just to check that the output should be correct
$response->setContent($content);
and client side i've tried using Blobs to create a file
var fileObj = new Blob([offerString], {type : 'application/pdf'});
but there are 2 problems. First, the blob, when sent to the server, doesn't have the required name. Secondly, the pdf file created (using window.saveAs to save the blob) is blank. It has the correct number of pages and author information, but it's completely blank.
If I use mPDF's file output, the resulting file is correct, so the problem must lie somewhere within the string->blob process.
Edit: The solution is to create the Blob not straight from the string but from an arrayBuffer. I've created the arrayBuffer using the solution suggested in another answer here

render pdf using javascript

In my App I need render a dynamic pdf.
I have an ajax function that call a php function that return a pdf (string format).
Now I render this pdf using data-uri in this way:
window.open('data:application/pdf;base64, ' + response);
...but this works only on chrome.
How can I get that also on firefox?

Hmm how about having your PHP create a temporary local file on the server, and opening that one in your window.open()?
Base64 if very verbose and I am sure you'd get better performance out of just loading it directly from the server (where it actually gets created). Same number of requests, better performance, what could you ask more? ;-)