How to decode and save a file sent to php from js - php

Question

I have a drag and drop uploader. I am using File Reader to send data As url.
var files = evt.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
var start = 0;
var stop = files[0].size - 1;
var reader2 = new FileReader();
var ext = f.name.substring(f.name.indexOf(".")+1);
reader2.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
$.post("/process/upload.php",{"blob":evt.target.result,"extension":ext},function(data){
console.log(data);
});
}
};
var blob = f.slice(start, stop + 1);
reader2.readAsDataURL(blob);
}
PHP recieves it but once I decode it I get "null" returned
$extension = $_POST['extension'];
$file = base64_decode($_POST['blob']);
$filePath = "../tmp/monkey.".$extension;
echo json_encode(base64_decode($_POST['blob']));
I also tried:
if(file_put_contents($filePath,$file)){
echo json_encode("it worked");
}else{
echo json_encode("it failed");
}
EDIT: I maintain the POST info all the way until I decode it. So once I decode it how do I determine the file is intact and can be saved?
Is there a better way to decode and save file?
What exactly am i doing wrong?
Thanks in advance!

Answer 1

$_POST['extension'] and $_POST['blob'] don't magically get populated into $_POST array when posting in JSON format. In fact based on your JSON format, the JSON will decode into an object, not an array.
You will need to get the contents directly from input like this:
$post = file_get_contents('php://input');
$post_obj = json_decode($post);
$extension = $post_obj->extension;
$file = base64_decode($post_obj->blob);
Or using $HTTP_RAW_POST_DATA variable like:
$post_obj = json_decode($HTTP_RAW_POST_DATA);
$extension = $post_obj->extension;
$file = base64_decode($post_obj->blob);