How to make POST requests with the FormData API

Solution 1:

You can add something like this:

 myapp.controller("myController",function($scope,$http){
        $scope.signup = function(){    
        var form_data = new FormData();
        angular.forEach($scope.files,function(file){
                form_data.append('file',file);
        });
        form_data.append('susername',$scope.susername);  // new line
        var config = {headers: { 'Content-type': undefined } };
        $http.post("picupload.php",form_data, config)
                .success(function(response){
                alert(response);
        });                
}   

I'm not sure about PHP but after googling I found that in php 'susername' can retrieved as below:

$_POST['susername'];

Solution 2:

How to make POST requests with the FormData API

When posting objects created by the FormData API, it is important to set the Content-type header to undefined.

$scope.signup = function(){
            
    var form_data = new FormData();
    angular.forEach($scope.files,function(file){
        form_data.append('file',file);
    });

    form_data.append('susername', $scope.susername);

    var config = {headers: { 'Content-type': undefined } };

    return $http.post("picupload.php",form_data, config)
      .then(function(response){
        console.log(response.data);
        return response.data;
    });                
};

Also a FormData object can not be serialized into a JSON string it must be sent by the XHR API alone. Append all necessary data to the FormData object.

When the XHR send API posts an object created by the FormData API, it automatically sets the content type header to multipart/form-data with a proper encapsulation boundary and encodes the data using base64 encoding.

Normally the $http service overrides the XHR API sets the content type header to application/json. Setting the content type header to undefined allows the XHR API the freedom to set the header properly.

Update

On the server side use:

$_POST['susername'];

to receive the data item.