angularjs and spring mvc - upload multiple files in one request

Question

I want to implement file uploading in my web application, I am using angular.js on client side and spring mvc on server side.

I managed to get single file upload and multiple file upload working by using https://github.com/danialfarid/angular-file-upload. The thing is, when I upload multiple files each one of them is coming to me as separate request (which is obvious event after reading example code):

//inject angular file upload directives and service.
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      $scope.upload = $upload.upload({
        url: 'server/upload/url', //upload.php script, node.js route, or servlet url
        // method: POST or PUT,
        // headers: {'headerKey': 'headerValue'}, withCredential: true,
        data: {myObj: $scope.myModelObj},
        file: $file,
        //(optional) set 'Content-Desposition' formData name for file
        //fileFormDataName: myFile,
        progress: function(evt) {
          console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
        }
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      })
      //.error(...).then(...); 
    }
  }
}];

there is an iteration through all the files.

Now I am wondering if it is possible to somehow upload multiple files as one, single request.

Answer 1

on spring controller side create

@RequestMapping(value = "/upload", method = RequestMethod.POST)
    public String save(@ModelAttribute("filesForm") FileUploadForm filesForm) {
                List<MultipartFile> files = filesForm.getFiles();
              //do something

        }


public class FileUploadForm 
    {
    private List<MultipartFile> files;

     // geters and  setters ...

    }

on client side upload service

return {
            send: function(files) {
                var data = new FormData(),
             xhr = new XMLHttpRequest();
                xhr.onloadstart = function() {
                    console.log('Factory: upload started: ', file.name);
                    $rootScope.$emit('upload:loadstart', xhr);
                };

                xhr.onerror = function(e) {
                    $rootScope.$emit('upload:error', e);
                };
                xhr.onreadystatechange = function(e)
                {
                    if (xhr.readyState === 4 && xhr.status === 201)
                    {
                        $rootScope.$emit('upload:succes',e, xhr, file.name ,file.type);

                    }
                };

         angular.forEach(files, function(f) {
         data.append('files', f, f.name);
            });

                xhr.open('POST', '../upload');
                xhr.send(data);


            }
        };