upload base64 (file) to php server via node js - php

I currently have a situation where FormData doesn't work for me. I'm using a specific "engine" Adobe CEP which is a little antiquated and the formData causes issues. My solution was to upload a file directly via base64 encoding. From Node JS I do:
let buff = new Buffer(filePath);
let base64data = buff.toString('base64');
console.log(base64data);
The console.log gives me the string:
Li4vLi4vLi4vLi4vLi4vLi4vLi4vVXNlcnMvb21hcmd1em1hbi8vRGVza3RvcC9Zb28vYWkyaHRtbC1vdXRwdXQvaG9tZS1wcm8tQXJ0Ym9hcmRfMS5qcGc=
axios.post(API_ENDPOINT, base64data)
.then(res => console.log(res))
From here I upload to a php server via axios.
The server receives it and I do:
<?php
$data = json_decode( file_get_contents('php://input') );
file_put_contents('testmeimg.jpg', base64_decode($data));
echo 'completed';
?>
another attempt
$data = file_get_contents('php://input');
file_put_contents('testmeimg.jpg', base64_decode($data));
var_dump($data);
"string(120) "Li4vLi4vLi4vLi4vLi4vLi4vLi4vVXNlcnMvb21hcmd1em1hbi8vRGVza3RvcC9Zb28vYWkyaHRtbC1vdXRwdXQvaG9tZS1wcm8tQXJ0Ym9hcmRfMS5qcGc="
"
The file correctly gets saved to my server but it's damaged and unreadable.
It also appears with zero bytes. Any idea what I'm doing wrong? or how I should handle this b64?

Thanks to the great help by #rickdenhaan aka the man.
I changed my node buffer code to:
let buff = new Buffer(fs.readFileSync(filePath));
let base64data = buff.toString('base64');
Previously I wasn't sending the file buffer only the path as a buffer.
Then on the php side this worked:
$data = file_get_contents('php://input');
file_put_contents('testmeimg.jpg', base64_decode($data));

Related

How to send byte array with image from AS3 to PHP?

I have from AS3 AIR App to send an image, beside rest of POST parameters to the PHP script which will do the rest. I want to somehow convert byte array with image to string and encode it with base64. I was successfull, but image data is wrong.
Here is the code I used to convert it:
...
//BA1 is Byte Array with an image in it
var data:String = BA1.toString();
OutSql.push({t: "b1", v: Base64.encode(data)});
...
Everything works fine, this data is sent to server, decoded, and stored as an image, but image is wrong. Somehow it is about 40 kb, while when I save it within Air application it is 22 kb. Any ideas?
p.s. I know that I can save it localy and upload it, but I really need to do it this way. Also, BA1.readUTF() generates an error, so not an option.
Addition:
On a server side I have tried to utf8_decode string before writing to file, and somehow I got an image which is proper dimensions, but... that image is not what I wanted to be, it looks like scribble...
import com.sociodox.utils.Base64;
.....
//BA1 is ByteArray with an image encoded
var enc_image=Base64.encode(BA1);
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.TEXT;
var request:URLRequest = new URLRequest("some.php");
var variables:URLVariables = new URLVariables();
variables.decode("image="+enc_image);
request.method = URLRequestMethod.POST;
request.data = variables;
loader.load(request);
of course, set your listeners, too...
in "some.php":
$imageData = base64_decode(str_replace(" ", "+", $_POST['image']));
$fh = fopen("path/to/image/somename.jpg", "wb");
fwrite($fh, $imageData);
fclose($fh);
This works like a charm :)
Soultion found. I have downloaded from http://www.sociodox.com/base64.html Base64.swc which is actually encoding and decoding image Byte Arrays. And because my string was JSON-ed (as a part of object sent to PHP) I had only to convert spaces to '+' and decode it and write to file - works perfect! Case closed.

Saving blob video with php

I am trying to send a buffered video to save it as a file on my server.
Always the file is empty.
My js get the url "blob:https://..." and sends to the php that receive it.
$file = file_get_contents(url);
file_put_contents($video_url_mp4."helloWorld.webm",$file);
I tried send the video as canvas and i only get one frame.
suggest please
A blob url is only usable in the browser that created it. So you cant use it on your server or copy and paste it into another browser or send the link to your friend etc.
What you need to do is get the blob that url was created from and use a FormData object and upload that to your server.
I get a file with the content as string on my php but this is not in a video format.
my js:
var myFile = new File(video.src);
var fd = new FormData();
fd.append('data', myFile);
and my php:
$f = $_POST['data'];
$decode = base64_decode(preg_replace('/^data\:image\/webp\;base64\,/', '', $f));
what is wrong?

uploading canvas context as image using ajax and php

I have a canvas and I want to upload the canvas context to the server using ajax and php. I want the final output to be an image stored on the server. I have done image uploading using form. But now I want to get the canvas context convert it to image and upload to the server!
So, how can i do that? Any suggestions, algos or solutions are appreciated!
This blog post aptly describes the method of saving canvases onto the server with AJAX queries, I guess this should be fitting for you.
Basically, you will need a var canvasData = testCanvas.toDataURL("image/png"); to retrieve the canvas' contents in JavaScript. This will be a Base64 encoded string, something like this: data:image/png;base64,fooooooooooobaaaaaaaaaaar==.
The following code will make sure the AJAX query sends the contents to the HTML:
var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData);
On the server, in the PHP script, you will have a key named HTTP_RAW_POST_DATA in the $GLOBALS array, this will contain the data we just fetched.
// Remove the headers (data:,) part.
$filteredData=substr($GLOBALS['HTTP_RAW_POST_DATA'], strpos($GLOBALS['HTTP_RAW_POST_DATA'], ",")+1);
// Need to decode before saving since the data we received is already base64 encoded
$decodedData=base64_decode($filteredData);
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $decodedData);
fclose( $fp );
Of course, test.png is the filename you will save. The first line is required to remove the data:image/png;base64, part of the encoded image, so that it can later be decoded by base64_decode(). It's output ($decodedData) will be saved to the file.

Send image from browser to server - possible?

There's an image gallery site, and the user can manipulate the images via javascript and HTML5 canvas. Is it possible to send back the manipulated image to the server for storing with PHP?
HERE you can find a complete article on the subject. But here's the short version and source codes:
First you need to convert the canvas binary data as a base 64 encoded string to send it to server:
var image = canvas.toDataURL("image/png");
Send this with an ajax call:
var ajax = new XMLHttpRequest();
ajax.open("POST",'save.php', false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(image);
Finally the PHP script save.php looks like this:
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
// Get the data
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
// Remove the headers (data:,) part.
// A real application should use them according to needs such as to check image type
$filteredData=substr($imageData, strpos($imageData, ",")+1);
// Need to decode before saving since the data we received is already base64 encoded
$unencodedData=base64_decode($filteredData);
//echo "unencodedData".$unencodedData;
// Save file. This example uses a hard coded filename for testing,
// but a real application can specify filename in POST variable
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
?>
The PHP script parses the raw post data, converts from base 64 to binary, and saves to a file. For more information on Base 64 check out THIS Wikipedia article.
Yes, canvas supports returning the image data as either Base64 encoded data url or Blob. See http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-todataurl . You can then grab the data url and post it using AJAX to your server, and Base64-decode it there.

How to export microphone recorded byearray as wav or mp3 from flash actionscript to php

I need help in exporting a bytearray to a wav or mp3 (or anything that runs!) from my flash code to my php page.
I am using microphone recorder to record voice, i use a a url request to send my ByteArray to my PHP page.
i send the bye array from flash like this:
var url = "http://localhost/wordswesay/uploads/testrec.php";
var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
var request:URLRequest = new URLRequest(url);
request.requestHeaders.push (header);
request.method = URLRequestMethod.POST;
request.data = soundBytes; //FLV byteArray
var loader:URLLoader = new URLLoader();
trace(request.data);
loader.load(request)
and in my php file, i do the following:
<?php
echo "test";
$im = $GLOBALS["HTTP_RAW_POST_DATA"];
$fp = fopen("test.wav", 'w');
fwrite($fp, $im);
fclose($fp);
?>
at the server side (the sime file as the php script) i get the test.wav with about 200kb of size but i can not play it! media players says it can't play this file as the codec might not be supported.
Any help would be appreciated
There is more to a audio file than the audio bytes, there needs to be a format specific header, and the bytes need to be stored in a way specific to the format type, which is often (mp3s for example) different then the raw bytes Flash will be giving you (which are decoded already)
Take a look on Google for a audio encoder, either in AS3 or PHP that will convert your bytes to a mp3 file, I'm sure there is something, but I don't know one off hand. Hopefully that explains why its not working, and pushes you into the right direction. Goodluck!

Categories