Use AngularJS to send a file inside an object

Question

I have a form to make the registration of a project with N participants. I was asked now to add a field where each participant must send their school certificate.
The problem is that, adding this field inside an object, I am no longer able to send the data to PHP.

The JSON I have to send has the following format:

{
    "description": [STRING],
    "name": [STRING],
    "objective": [STRING],
    "participants": [NUMBER],
    "regulament": [BOOLEAN],
    "resume": [STRING],
    "users": {
        "1": {
            "born": [DATE],
            "educationCertificate": [OBJECT], // File
            "email": [STRING],
            "genre": [BOOLEAN],
            "level": [NUMBER],
            "name": [STRING],
            "neighborhood": [STRING],
            "phone": [STRING],
            "school": [STRING],
            "socialNumber": [STRING]
        },
        . . .
        "n": {
            "born": [DATE],
            "educationCertificate": [OBJECT (FILE)],
            "email": [STRING],
            "genre": [BOOLEAN],
            "level": [NUMBER],
            "name": [STRING],
            "neighborhood": [STRING],
            "phone": [STRING],
            "school": [STRING],
            "socialNumber": [STRING]
        }
    }
}

To send the files, my $http looked like this:

$http({
    method: "POST",
    url: [SCRIPT],
    headers: {
        "Content-Type": undefined
    },
    data: $scope.data,
    transformRequest: function (data) {
        var formData = new FormData();

        angular.forEach(data, function (value, key) {
            formData.append(key, value);
        });

        return formData;
    }
}).success(function(response) {
    // do something
});

And in PHP, this is my function to retrieve the data sent by AngularJS:

function param() {
    $array = array();
    $request = new stdClass();

    if (count($_GET) || count($_POST) || count($_FILES)) {
        $request = json_decode(json_encode(array_merge($_GET, $_POST, $_FILES)), false);
    } else {
        $request = json_decode(file_get_contents("php://input"));
    }

    if ($request) {
        $array = array_filter(array_map(function($data) {
            return is_string($data) ? trim($data) : $data;
        }, get_object_vars($request)), function($data) {
            return is_string($data) ? strlen($data) : $data;
        });
    }

    return json_decode(json_encode($array), false);
}

/* In the script */
$request = param();

However, the data that is coming in PHP is as follows:

{
    "description": [STRING],
    "name": [STRING],
    "objective": [STRING],
    "participants": [NUMBER],
    "regulament": [BOOLEAN],
    "resume": [STRING],
    "users": [STRING] // "[object Object]"
}

I always made use "Content-Type": undefined, but I've tried to use "Content-Type": "multipart/form-data" and "Content-Type": "application/x-www-form-urlencoded;". But the result is even worse.

Does anyone know how to solve this problem?

Answer 1

I faced same issue with the Google App Engine(Java) and Servelet recently. My situation same as yours. Where user can upload 5 attachments and i need to upload those files with some other info. In my case $http is not worked. What i did individual request made for each file attachments. Not a actual solution to your problem but this will help you surely.

var formData = new FormData();
formData.append('attachment',FILE_OBJECT);  
$.ajax({
    url: "URL",
    type: "POST",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    xhr: function() {  // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
        return myXhr;
      },
    }).success(function( data ) {
        console.log("File uploaded successfully");
    }).error(function(data){
        console.log("Somwthing went wrong");
    });