1

I'm posting a file and a JSON object with formData from AngularJS to Spring MVC using REST.The file is well received while the JSON object keeps displaying as 'null' in the server-side.

var templateJson = {
    nextIcon : '',
    beforeIcon : '',
    refreshIcon : '',
    menuItemFont : '',
    menuItemSize : '',
    menuItemColor : '',
    ourPromotionsFont : '',
    ourPromotionsSize : '',
    ourPromotionsColor : '',
    backgroundBlur : '',
    Menuseparator : ''
};

//after setting their values with Jquery and uploading the file I'm setting the formData.

$scope.uploadFormData = function() {

            var oMyForm = new FormData();
            oMyForm.append("file", file2.files[0]);
oMyForm.append('templateJson',JSON.stringify(templateJson)); 

        $http({

            method : 'POST',
            url : 'uploadFile',
            data: oMyForm,

            headers : {
                'Content-Type': undefined,
            },
                    transformRequest : function(response, headersGetterFunction) {

                headers = {
                        'Content-Type': undefined,
                };

                return response;
            },
            headers : {
                'Content-Type' : undefined
            }
        }).success(function(data, headers) {
             console.log(data);
            alert("DataForm Sent");

        }).error(function(data, headers) {
            //alert("Exception" + data);
        });

    }

});

When i print the JSON on the console it looks well . Example :

  {"nextIcon":"Icon (8).png","beforeIcon":"Icon (14).png","refreshIcon":"Icon (12).png","menuItemFont":"Verdana","menuItemSize":"11","menuItemColor":"#5ca393","ourPromotionsFont":"century schoolbook","ourPromotionsSize":"28","ourPromotionsColor":"#669999","backgroundBlur":"","Menuseparator":"separator2.png"}

For the server-side (SpringMVC) , here is the controller:

@RequestMapping(value = "/uploadFile", method=RequestMethod.POST, headers="Content-Type=multipart/form-data", consumes = consumes ={"multipart/form-data"})
public void myMethod(@RequestPart(value="templateJson",required=false) Template1 temp1, @RequestParam(value = "file") MultipartFile file
        ) {  
    System.out.println(file.getOriginalFilename());
    System.out.println(temp1.getNextIcon().getBeforeIcon());

}

Template1 is a POJO :

private String nextIcon;
private String beforeIcon;
private String refreshIcon ;
private String menuItemFont ;
private String menuItemSize ;
private String menuItemColor;
private String ourPromotionsFont;
private String ourPromotionsSize;
private String ourPromotionsColor;
private String backgroundBlur;
private String Menuseparator;
//geters&setters

The Output : 
"hungryeyesfood-logo.png      <--- File name
 null"                         <---- JSON

Any Idea what's going wrong with posting this JSON ?

kingabdr
  • 588
  • 5
  • 12
  • Due to [b54a39](https://github.com/angular/angular.js/commit/b54a39e2029005e0572fbd2ac0e8f6a4e5d69014), $http's deprecated custom callback methods - success() and error() - have been removed. – georgeawg Aug 30 '17 at 20:24
  • Due to [5da1256](https://github.com/angular/angular.js/commit/5da1256fc2812d5b28fb0af0de81256054856369), `transformRequest` functions can no longer modify request headers. – georgeawg Aug 30 '17 at 20:26
  • For the AngularJS framework, the default for $http.post requests is `application/json`. Avoid using `multipart/form-data`. – georgeawg Aug 30 '17 at 20:35
  • The [base64 encoding](https://en.wikipedia.org/wiki/Base64) of `Content-Type: multipart/form-data` adds an extra 33% overhead. If the server supports it, it is **more efficient to send files directly:** For more infomation, see [AngularJS: how to implement a simple file upload with multipart form?](https://stackoverflow.com/questions/13963022/angularjs-how-to-implement-a-simple-file-upload-with-multipart-form/45599921#45599921). – georgeawg Aug 30 '17 at 20:40

0 Answers0