Request with different files in danialfarid angular-file-upload

Question

I used danialfarid angular-file-upload to upload files. I want to send request with two files and one json string. Each two files has different params in Server side. Server side used spring rest. How can I send?

Here is my angular service.

services.factory('USR008Service', function($resource, $http, $upload) {
    return {
        insertUSR008FUN01 : function(talent, talentFile, coverImg) {
            return $upload.upload({
                url: contextRoot + '/insertUSR008FUN01',
                fields: {
                    'USR008REQ02': JSON.stringify(talent),
                },
                file: coverImg,
                fileFormDataName : 'coverImg'
            });
        }
    }   
});

Here is my Server Side Controller.

@RequestMapping(value = URIConstant.insertUSR008FUN01, method = RequestMethod.POST, produces = "application/json; charset=utf-8")
public @ResponseBody USR008RES02 insertUSR008FUN01(@RequestParam(value = "talentFile", required = false) MultipartFile talentFile, @RequestParam(value = "USR008REQ02") String jsonData,
        @RequestParam(value = "coverImg", required = false) MultipartFile coverImg) {
    USR008RES02 result = null;
    try {
        Gson gson = new GsonBuilder().create();
        USR008REQ02 usr008req02 = gson.fromJson(jsonData, USR008REQ02.class);
        result = usr008SEV.insertUSR008RES02(usr008req02, talentFile, coverImg);
    } catch (SystemException e) {
        logger.error("insertUSR008FUN01 function has been failed.");
        throw new SystemException("insertUSR008FUN01 function has been failed.", e);
    }
    return result;
}

Answer 1

This is how I implemented this in my app.

HTML

        <label for="uploadDomainFile">Select File</label>
        <input type="file" class="form-control" id="uploadDomainFile" ng-model="fileDomain" ng-file-select>
        <label for="uploadLegalFile">Select File</label>
        <input type="file" id="uploadLegalFile" ng-model="fileLegal" ng-file-select>

JS

//controller
$scope.createDomain = function () {
            adminService.createDomain($scope.domain, $scope.fileLegal, $scope.fileDomain);
        };
//service
//ommitting irrelevant code
uploadOwlFile(fileLegal, domain.id);
uploadOwlFile(fileDomain, domain.id);

        var uploadOwlFile = function(file, domainId) {
          if (file && !!file.value) {
            $upload.upload({
              url: '/api/space/' + domainId + '/owl',
              data: { fileType: file.fileType },
              file: file.value[0]
            })
            .progress(function(evt){
              console.log('progress: ' + parseInt(100 * evt.loaded / evt.total))
            })
            .success(function(data, status, headers, config){
              console.log('success', 'file: ' + config.file.name + ' successfully uploaded');
              return true;
            })
            .error(function(err, status){
              console.log('failure', err);
              return false;
            })
          } else {
            return true;
          }
        };

Returning true or false is based on the status of the file upload.

So, my method involves using two ng-model s for the 2 inputs and uploading the file separately.