How to pass base64 encoded image to php? - php

Question

I was wondering how I would get php script to retrieve my base64 encoded image then write to server? I tried doing a post dump from my php script and I keep getting a response that it is empty. I've tried following a few other stackoverflow guides on this but none of them use a factory afaik.
js
var app = angular.module("app", ["ui.bootstrap"]);
//http://stackoverflow.com/questions/18571001/file-upload-using-angularjs
app.factory('API', function ($http) {
return {
uploadImage: function (image) {
return $http.post('/js/upload.php', image);
}
}
});
app.controller('MainController',['$scope', '$http', 'API', function($scope, $http, API) {
$scope.imageUrl = "";
$scope.template = "";
$scope.templates = [
'select an option...',
'MakeGray',
'Canny'
];
$scope.template = $scope.templates[0];
$scope.add = function() {
var f = document.getElementById('fileToUpload').files[0]; // name of image
var files = document.getElementById('fileToUpload').files;
var r = new FileReader();
r.onload = function(event){
console.log(event.target.result);
}
r.onloadend = function(e) {
var data = e.target.result;
var formData = new FormData();
$("#img1").prop("src", data);
$("#img2").prop("src", data);
formData.append("fileToUpload", f,f.name);
API.uploadImage(formData)
.success(function (imgUrl) {
$scope.imageUrl = imgUrl;
})
.error (function (error) {
});
}
r.readAsDataURL(f);
}
}]);
php
<?php
if(isset($_FILES['fileToUpload'])){
$errors= array();
$file_name = $_FILES['fileToUpload']['name'];
$file_size =$_FILES['fileToUpload']['size'];
$file_tmp =$_FILES['fileToUpload']['tmp_name'];
$file_type=$_FILES['fileToUpload']['type'];
$file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
$extensions = array("jpeg","jpg","png");
if(in_array($file_ext,$extensions )=== false){
$errors[]="image extension not allowed, please choose a JPEG or PNG file.";
}
if($file_size > 2097152){
$errors[]='File size cannot exceed 2 MB';
}
if(empty($errors)==true){
move_uploaded_file($file_tmp,"../uploads/".$file_name);
echo " uploaded file: " . "images/" . $file_name;
}else{
print_r($errors);
}
}
else{
$errors= array();
$errors[]="No image found";
print_r($errors);
}
?>

Answer 1

Angular have a particularity in concern the uploading.
First, you have to kno, angular's default transformRequest function will try to serialize our FormData object, so we override it with the identity function to leave the data intact.
Next, the default content-type header for POST requests is "application/json", so you must to change this because you want to upload a file.
By setting 'Content-Type': undefined, the browser sets the Content-Type to multipart/form-data himself and fills in the correct boundary.
Manually setting 'Content-Type': multipart/form-data will fail to fill in the boundary parameter of the request.
Look about others possible issues : https://docs.angularjs.org/api/ng/service/$http
Now you can get you image from $_POST global array of PHP.
Fixed code
uploadImage: function (formData)
{
return $http.post('js/upload.php', formData,
{
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
});
}
Note:
That the below service uses the FormData object which is not supported by IE9 and earlier.