在grails控制器中解析ajax多个文件上传

Question

I have used FormData() for ajax multiple files upload. In browser console, the list of files is shown but inside controller, the list is show as "[object File], [object File], [object FIle]" in string format. How can I parse the values out of it? My javascript code is:

var form = jQuery("#upload-form").find('input[type="file"]');
var picData = new FormData();
var fl = form.get(0).files.length;
var files = []; 

for (var i = 0; i < fl; i++) {

    files.push(form.get(0).files[i]);
    console.log(files); //The list files is shown
}

 picData.append("filesList[]",files);

jQuery.ajax({ 
   url: 'upload/fileSave',
   type: 'post',
   dataType:'json',
   data:picData,
   enctype:"multipart/form-data",
   contentType:false,
   processData:false,
   success: function(data) {
            }
});

I did JSON.parse(params.filesList[]) But it only outputs "object FIle" string. Should I do someting in javascript before I send it to controller?

Answer 1

Normally inside controller, you can get file from request as:

File file    = request?.getFile('fileName')

But in your code, there are multiple files so you can iterate every file

File file0    = request?.getFile('filesList[0]')
File file1    = request?.getFile('filesList[1]')

Answer 2

You access like this in your controller action:

 for (filename in request.getFileNames()) {
        MultipartFile fileContent = request.getFile(filename)
        println "This file name" + filename
        println "This file is file content" + fileContent                    
  }

Hope this will help you !!!.

Answer 3

I did a workaround in this. I had to put each of the files in key value pairs before I passed it to backend.

jQuery('#file-submit-save').click(function(){

                               var form = jQuery("#upload-form").find('input[type="file"]');
                               var picData = new FormData();
                               var fl = form.get(0).files.length;
                               for (var i = 0; i < fl; i++) {
                               picData.append("files["+i+"]", form.get(0).files[i]);
                               }
                               picData.append('fileSize',fl);

                            jQuery.ajax({
                                   url: '/fileupload/ajaxSave',
                                   type: 'post',
                                   dataType:'json',
                                   data:picData,
                                   enctype:"multipart/form-data",
                                   contentType:false,
                                   processData:false,
                                   success: function(data) {
                                   }
                               });
                           }
                       });

Only then I could the multipart files associated with corressponding keys in backend.