Request with different files in danialfarid angular-file-upload - angularjs

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-models for the 2 inputs and uploading the file separately.