Upload data and multiple files with angularjs and Spring mvc

Question

I have a html form with the structure:

<form class="form-horizontal" method="post" enctype="multipart/form-data"> <div class="form-group"> <div class="col-sm-10 top-element"> <select class="form-control" ng-model="category" id="categorySelect" required> <option selected value="1">Application & Services</option> <option value="2">Benefits & Paper Work</option> <option value="3">Hardware & Software</option> <option value="4">People Management</option> <option value="5">Security & Access</option> <option value="6">Workplaces & Facilities</option> </select> </div> <div class="col-sm-10 element"> <input type="text" ng-model="name" class="form-control" id="ticketName" required> </div> <div class="col-sm-10 element"> <textarea class="form-control" ng-model="description" id="ticketDescription" rows="3"></textarea> </div> <div class="col-sm-10 element"> <select class="form-control" ng-model="urgency" id="ticketUrgency" name="urgency"> <option selected value="Low">Low</option> <option value="Medium">Medium</option> <option value="High">High</option> <option value="Critical">Critical</option> </select> </div> <div class="col-sm-10 element"> <input class="form-control" id="date" name="date" ng-model="date" placeholder="MM/DD/YYYY" type="text"/> </div> <div class="col-sm-10 element"> <div class="form-inline"> <input type="file" class="form-control" id="file" name="file" file-model="file" multiple accept=".pdf,.jpeg,.jpg,.doc,.docx,.png"> <input type="button" class="form-control" id="deleteFile" onclick="document.getElementById('file').value = ''" value="Delete"> </div> </div> <div th:text="${error}"></div> <div class="col-sm-10 element"> <textarea class="form-control" id="comment" ng-model="comment" rows="3"></textarea> </div> </div> <div class="form-inline" style="float: right; margin-bottom: 60px; margin-right: 60px;"> <input type="submit" ng-click="saveDraft()" name="draft" class="btn btn-primary ticket-list-btn draft-btn" value="Save as Draft"> </div> </form> 

And I want to upload data to the server by one http.post request. If you do this without files, all works fine: Angular controller:

 var data = { name: $scope.name, description: $scope.description, desiredResolutionDate: $scope.desiredResolutionDate, state: $scope.ticketState, categoryId: $scope.category, urgency: $scope.urgency, comment: $scope.comment } ; $http.post(url, data) .then( function (response) { }, function (errResponse) { console.log(errResponse); } ) 

And Spring controller:

@RequestMapping(value = "/new", method = RequestMethod.POST) public void createTicket(@RequestBody TicketDto newTicketDto, Authentication authentication) { User user = userService.loadUserByUsername(authentication.getName()); newTicketDto.setOwnerId(user.getId()); Ticket ticket = TicketDto.transformToEntity(newTicketDto); ticketService.save(ticket); } 

I tried to add to my TicketDto object field MultipartFile[] files; and send files in post request like other fields, but it didn.t work. How can I do this?

Answer 1

angular part code

var file = $scope.file; var fd = new FormData(); fd.append('dto', JSON.stringify($scope.ticketdto)); fd.append('file', file); $http({ method : 'POST', url : 'url', headers : { 'Content-Type' : undefined }, data : fd, transformRequest : function(data, headersGetterFunction) { return data; } }).then(function(response) { ...... }).catch(function(response) { ...... }); 

java part

 @RequestMapping(value = "/new", method = RequestMethod.POST) public void createTicket(@RequestParam String dto, @RequestParam(required = false) MultipartFile file , Authentication authentication) { .... //convert string ticket to dto using jackson databind ..... } 

filemodel

 yourappname.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); }); }); } }; }]);