Why jquery-file upload always sends single file to backend

Question

I'm facing problem with multiple fileupload.

The problems are:

1. If i upload 2 files only 1 file being sent to backend.

2. Only last file is sent to server (skipping other files, in other words only 1 file sent to backend)

Question: I have a situation where on each input i can browse multiple files and can click on submit. I'm expect every file should be sent to server.

Here: Is jsfiddle showing my problem: http://jsfiddle.net/eabangalore/jyteus6c/2/

Note: Please the console.log to check whether all files sent to server or not.

Below is my code:

var filesUploadList = [];

function initializeMultipleFileUpload(){
    fileList.forEach(function(obj){
    
         $('input[data-id="'+obj.identifier+'"]').fileupload({
              url: 'https://jsonplaceholder.typicode.com/posts',
              autoUpload: false,
              maxChunkSize: 10*1024*1024, // 1MB
              maxRetries: 10,
              dataType: 'json',
              multipart: false,
              sequentialUploads: true,
              replaceFileInput: false,
              progress: function(e,data){
                  console.log('Progress for file Name:  ',data.data.name);
             },
          }).on("fileuploadadd", function (e, data) {
              filesUploadList.push(data.files[0])
          });
          
    });
}

var fileList = [
     {'fileNo':1,identifier:111},
     {'fileNo':2,identifier:222},
     {'fileNo':3,identifier:33}
];
var inputFileStr = '';
for(var i = 0; i< fileList.length; i++){
    inputFileStr += '<input type="file" multiple data-id="'+fileList[i].identifier+'"><button data-buttonid="'+fileList[i].identifier+'" class="comm-submit-btn">submit</button>';
}

$('#multiplefiles').html(inputFileStr);

initializeMultipleFileUpload(); //initialize fileupload here



$(document).ready(function () {

 $(".comm-submit-btn").click(function () {
        var fileUploadInputId = $(this).attr('data-buttonid');
        console.log('.....filesUploadList.........',filesUploadList);
        $('input[data-id="'+fileUploadInputId+'"]').fileupload('send', {files: filesUploadList });
 })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.2.0/js/jquery.iframe-transport.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.2.0/js/jquery.fileupload.min.js"></script>


<div id="multiplefiles">
  
</div>

any please help me still i'm unable to proceed further

Please help me thanks in advance!!!!!!

Answer 1

Have a look at the api documentation https://github.com/blueimp/jQuery-File-Upload/wiki/API

Note: The send API method sends the given files directly, without splitting them up into multiple requests. So if your files argument is made up of 3 files, it will still only send one request. If the multipart option is true, it will still send all 3 files as part of one multipart request, else it will only send the first file. So if you need to send files with multiple requests, either call the send API method multiple times, or use the add API method instead.

So modify your .comm-submit-btn handler to this:

 $(".comm-submit-btn").click(function () {
var fileUploadInputId = $(this).attr('data-buttonid');
console.log('.....filesUploadList.........',filesUploadList);
filesUploadList.forEach(function(obj){
    $('input[data-id="'+fileUploadInputId+'"]').fileupload('send', {files: obj });
});

})

Answer 2

You should try to set multipart: true

Below is the documentation link.

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#singlefileuploads

It is clearly mentioned that Uploading multiple files with one request requires the multipart option to be set to true