deadend
deadend

Reputation: 1376

Angularjs pass null value in file multipart FormData to Spring MVC

I am attempting to send form data with Multipart data (Image) to Spring MVC controller. From my form. image field is non mandatory. so when i call spring controller without input image field, i get below error in browser console.

Failed to load resource: the server responded with a status of 400 (Bad Request)

Html Code:

<input file="file" type="file" id ="file2"/>

AngularjS Code:

$scope.saveData = function (formObj) {
    $http({
        url: CONTEXT_PATH+'saveFile',
        method: "POST",
        headers: { 'Content-Type': undefined },
        transformRequest: function (data) {
            alert(data.files);
            var formData = new FormData();
            formData.append("model", angular.toJson(data.model));
            formData.append("file", data.files);
            return formData;
        },
        data: { model: formObj, files: $scope.file }
    }).then(function (response) {
        //alert(response);
    });
};


app.directive('file', function () {
    return {
        scope: {
            file: '='
        },
        link: function (scope, el, attrs) {
            el.bind('change', function (event) {
                var file = event.target.files[0];
                scope.file = file ? file : undefined;
                scope.$apply();
            });
        }
    };
});

Spring Controller Code:

@RequestMapping(value = "/saveFile")
public @ResponseBody String storeAd(@RequestParam ("model") String adString, @RequestParam ("file") MultipartFile file) throws IOException {
    System.out.println("adString > "+adString);
    return "OK";
}

Upvotes: 0

Views: 910

Answers (2)

yassir akhayad
yassir akhayad

Reputation: 11

When the image is not uploaded, the request is bad because Spring MVC assumes all parameters required unless otherwise defined. In your case, you should add required = false.

@RequestParam(value = "file", required = false)

Upvotes: 1

Alien
Alien

Reputation: 15898

Your server code is expecting a request parameter with name "file" but you are not defining it properly.

Change

<input file="file" 

To

<input type="file" name="file" 

Upvotes: 0

Related Questions