CODEWITHSUNDEEP
javaangularjsspringspring-boot
secret
secret

Reputation: 786

"the current request is not a multipart request" angularjs and spring boot

I know this question has been asked over and over, however after trying all the possible options still I get this error:

the current request is not a multipart

Here is my code in angular:

app.controller("controller", function ($scope, $http, $window, $log) {

    $scope.upload = function () {
        var file = $scope.myFile;
        var fd = new FormData();
        fd.append('file', file);
        $http.post('upload', fd, {
            transformRequest: angular.identity,

        })
            .success(function(){
            })
            .error(function(){
            });
    };

Controller code:

@RequestMapping(value = "/upload", method = RequestMethod.POST)
    public Callable<FileUpload> uploadFile(@RequestParam("file") MultipartFile file) throws Exception {
        parser = fileHandlerService.getParser(file);
        Callable<FileUpload> asyncResult = new Callable<FileUpload>() {
            @Override
            public FileUpload call() throws Exception {
                FileUpload fileUpload = fileHandlerService.getUploadStatus();
                return fileUpload;
            }
        };

        return asyncResult;
    }

HTML code:

<div class="vertical-center">
        <input type="file" file-model="myFile">
        <button ng-click="upload()" class="btn btn-primary btn-lg">Upload
        </button>
</div>

I tried putting: headers: {'Content-Type': undefined } however with adding header, I don't get error 500 anymore but I get error 400.

I send the file through Postman without any headers, and it works fine. So I don't understand why it doesn't work through angular.

Thanks in advance.

Upvotes: 0

Views: 3227

Answers (1)

Femi Aluko
Femi Aluko

Reputation: 42

In addition to adding headers: {'Content-Type': undefined } , you can change the div to a form and add enctype="multipart/form-data" to the form. i.e your code would look like;

<form class="vertical-center" enctype="multipart/form-data">
    <input type="file" file-model="myFile">
    <button ng-click="upload()" class="btn btn-primary btn-lg">Upload
    </button>
</form>

Upvotes: 1

Related Questions