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?

The accepted answer doesn't work with multiple files.

georgeawg
– georgeawg

2018-06-19 21:55:47 +00:00
Commented Jun 19, 2018 at 21:55 — georgeawg
– georgeawg, Commented Jun 19, 2018 at 21:55

Kalaiselvan · Accepted Answer · 2018-06-20 06:39:57Z

0

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

edited Jun 20, 2018 at 6:39

answered Nov 28, 2017 at 16:44

Kalaiselvan

2,1441 gold badge19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Fairy Over a year ago

Thanks, but it works only with one file. What should I do to handle multiple file uploading? I tried to use <code>@RequestParam MultipartFile[] files</code>, but when I upload files, length of the array is 0

Kalaiselvan Over a year ago

it's too simple while making angularjs code var file = $scope.file; itself append your files fd.append('file', file);

Kalaiselvan Over a year ago

I think you are using file-model=file directive in that it will return 0 index change it into return all elements in an array of files

Kalaiselvan Over a year ago

can you able to post your file-model directive?

Kalaiselvan Over a year ago

@Fairy I have updated my answer with file-model it'ill work only one file-input with multiple files

|

Collectives™ on Stack Overflow

Upload data and multiple files with angularjs and Spring mvc

1 Answer 1

angular part code

java part

filemodel

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

angular part code

java part

filemodel

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related