Angular submit form data

Question

I am using ng-flow library to load images to server and after user dragged and dropped image, I can get HTML 5 file image to my controller and I need to download it to server together with the ohter parameters, like currency, subject etc. I googled and find that the best way is to convert to json form data and send with POST method. When I got the response from server, I see that form data contains subject but does not contains the image. What could be wrong?

In following code url is real, you can try to get your own response.

Angular code:

 var file = $flow.files[0];
 $http({
            method: 'POST',
            url: "http://yuppi.com.ua/server/rest/add.php?key=453sdfg3t&action=add",            
            headers: { 'Content-Type': false },

            transformRequest: function (data) {

                 var formData = new FormData();

                 formData.append("subject",  angular.toJson(data.subject));
                 formData.append("file", data.file);

                 return formData;                
            },

            data: { subject: subject, file: file}
        }).
        success(function (data, status, headers, config) {
            alert(data);
        }).
        error(function (data, status, headers, config) {
            alert(data);
        });

PHP code:

$form = file_get_contents("php://input");

echo "Form: ";  print_r($form);

var_dump of $_FILES

"array(1) {
  ["photo"]=>
  array(5) {
    ["name"]=>
    string(14) "gradient-2.png"
    ["type"]=>
    string(9) "image/png"
    ["tmp_name"]=>
    string(14) "/tmp/phpY8nqji"
    ["error"]=>
    int(0)
    ["size"]=>
    int(442567)
  }
}

Answer 1

You should send your form data to your controller,try this :

data: { subject: subject, data: formData}

and also you need to define formData at first to send through the $http .Try this at the end :

var file = $flow.files[0]; 
var formData = new FormData();

 $http({
            method: 'POST',
            url: "http://yuppi.com.ua/server/rest/add.php?key=453sdfg3t&action=add",            
            headers: { 'Content-Type': false },

            transformRequest: function (data) {

                 formData.append("subject",  angular.toJson(data.subject));
                 formData.append("file", data.file);

                 return formData;                
            },

            data: { subject: subject, data: formData}
        }).
        success(function (data, status, headers, config) {
            alert(data);
        }).
        error(function (data, status, headers, config) {
            alert(data);
        });

and for php part you can use this function that i have written :

function uplFile($fn,$path='upload/'){ 
    $delim = explode(';base64,',$fn);
    $type = str_replace('data:','',$delim[0]);
    switch ($type) { 
        case "image/gif": 
            $type = '.gif';
            break; 
        case "image/jpeg": 
            $type = '.jpg';
            break; 
        case "image/png": 
            $type = '.png';
            break; 
        case "image/bmp": 
            $type = '.bmp';
            break; 
    } 
    $data = base64_decode($delim[1]);  
    $file = uniqid() .$type;
    $success = file_put_contents($path.$file, $data);
    return $file;
}

This function gets formData() contents as first parameter and gets upload location for second parameter.For your data you can use it easily as below:

uplFile($_POST['file']);