Upload file from AngularJS controller to Spring writtin in Kotlin

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
}