Upload file from AngularJS controller to Spring writtin in Kotlin - angularjs

Question

There are a few similar questions already on StackOverflow. I have gone through some of them, but they did not work for me. So please do not mark this question as duplicate.
I want to upload a file using AngularJS to Spring Controller written in Kotlin. I have written the code below in order to do so, but it does not work. I get a 404 bad request response with a message that Required request part 'file' is not present
Input
<form class="col-xs-12 col-sm-4 form-inline " ng-submit="$ctrl.saveFiles()">
<div class="form-group">
<label for="file-upload" class="custom-file-upload">
Choose File
</label>
<input id="file-upload" type="file" file-model="$ctrl.file" name="file"/>
</div>
<div class="form-group">
<button class="btn btn-primary pull-right" type="submit">Submit</button>
</div>
</form>
file-model directive
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}])
I have copied this directive from this question
$ctrl.saveFiles() function
$ctrl.saveFiles = function () {
// var file = document.getElementById("file-upload").files[0]
var formData = new FormData();
formData.append("file", $ctrl.file);
console.log(formData.has("file")); // true
var url = '/upload',
config = {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
};
return $http.post(url, formData, config)
};
Spring #bean
#Bean
open fun multipartResolver(): MultipartResolver {
val multipartResolver = CommonsMultipartResolver()
multipartResolver.setMaxUploadSize(500000000)
return multipartResolver
}
Spring #PostMapping method
#PostMapping(value = "/upload")
#Throws(Exception::class)
fun uploadFile(#RequestParam("file") file: MultipartFile): String {
return "Upload file"
}
Request header
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 4829202
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryJ8BRhjvMRLt9UdRS
As you see though I use Kotlin, It is totally fine to answer in Java.

Answer 1

This was my first time uploading a file using AngularJS and Spring. There are some who uses CommonsMultipartResolver. I had done so. However, I did not need to use it.
It was due to using CommonsMultipartResolver that I could not upload file. I removed the code below and it works as expected. However, for some reason, I can not upload as large files as an unsplash photo
#Bean
open fun multipartResolver(): MultipartResolver {
val multipartResolver = CommonsMultipartResolver()
multipartResolver.setMaxUploadSize(500000000)
return multipartResolver
}