ng-file-upload : send List as additional data

Question

I want to upload a file using ng-file-upload, and send at the same time a list of values (type Long).
I have done that:
Client side

vm.uploadFiles = function(file, errFiles) {
    $scope.f = file;
    $scope.errFile = errFiles && errFiles[0];
    if (file) {
        file.upload = Upload.upload({
            url: '/api/sendMailCra',
            fields: {'collaborateursId':vm.collaborateursId},
            file: file
        });

        file.upload.then(function (response) {
            $timeout(function () {
                file.result = response.data; 
            });
        }, function (response) {
            vm.clear();
        }, function (evt) {
        });
    }
}

Server side

@RequestMapping(value = "/sendMailCra",
        method = RequestMethod.POST,
        produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public void upload(@RequestParam("collaborateursId") List<Long> collaborateursId, @RequestParam("file") MultipartFile file) throws IOException {
    log.debug("REST send mail to Collaborateurs : {}"+collaborateursId);
}

I am getting a

500 Internal server error

with no error log on server side.

How can I pass my List from client to server side?
Thanks

score 0 · Answer 1 · answered Oct 17 '17 at 10:49

By using form data we can send File and data from angular-controller to server.

vm.uploadFiles = function(file, errFiles) {
    $scope.f = file;
    $scope.errFile = errFiles && errFiles[0];
    var data = new FormData();
    data.append("uploadFile ", file);
    data.append("collaborateursId ", vm.collaborateursId);
    if (file) {
        file.upload = Upload.upload({
            url: '/api/sendMailCra',
            data:data,
            headers: {'Content-Type': undefined}
        });

        file.upload.then(function (response) {
            $timeout(function () {
                file.result = response.data; 
            });
        }, function (response) {
            vm.clear();
        }, function (evt) {
        });
    }
}

In Controller using mutipartRequest

@RequestMapping(value = "/sendMailCra",
        method = RequestMethod.POST,
       )
@Timed
public void upload(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String collaborateursId= request.getParameter("collaborateursId");

    next converted the request to multipartRequest for get th file 
    MultipartHttpServletRequest mRequest  = (MultipartHttpServletRequest) request;
    Iterator<String> fileNames = mRequest.getFileNames();
            while (fileNames.hasNext()) {
//              HashMap<String, String> hashMap = new HashMap<String, String> ();
                MultipartFile file = mRequest.getFile(fileNames.next());

                store file into your prefered location....
                }

        log.debug("REST send mail to Collaborateurs : {}"+collaborateursId);
}

We can set File size limit in the spring configurationFile link

<beans:bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

         <!-- setting maximum upload size -->
        <beans:property name="maxUploadSize" value="100000" />

    </beans:bean>

see this link

thanks. On server side, I don't see the property "collaborateursId" in request object (of type StandardMultiPartHttpServletRequest at runtime). I only have properties : multipartParameterNames size =0 and multipartFiles size =0. — thomas, Oct 17 '17 at 12:41
@RequestMapping annotation pass only value and method don't pass produces value .and see this link you will get more information:https://stackoverflow.com/questions/34991498/how-to-send-multiple-files-along-with-the-form-data-in-angularjs/46708678#46708678 — Raju, Oct 17 '17 at 13:36

ng-file-upload : send List as additional data

1 Answers1