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: /

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: '',
              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="m-submit-btn">submit</button>';
}

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

initializeMultipleFileUpload(); //initialize fileupload here



$(document).ready(function () {

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

<script src=".3.1/jquery.min.js"></script>
<script src=".12.1/jquery-ui.min.js"></script>
<script src=".2.0/js/jquery.iframe-transport.min.js"></script>
<script src=".2.0/js/jquery.fileupload.min.js"></script>


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

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/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./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="m-submit-btn">submit</button>';
}

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

initializeMultipleFileUpload(); //initialize fileupload here



$(document).ready(function () {

 $(".m-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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/blueimp-file-upload/10.2.0/js/jquery.iframe-transport.min.js"></script>
<script src="https://cdnjs.cloudflare./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!!!!!!

• javascript
• jquery
• node.js
• jquery-file-upload
• blueimp

• Why do you use 3 submit buttons ? – Casper Commented Sep 12, 2019 at 9:16
• Possible duplicate of stackoverflow./questions/19807361/… – Casper Commented Sep 12, 2019 at 9:17
• @Casper, i'm using 3 different submit buttons, as in my project each submit button is separate (in future i will add progress beside it). in other words each submit button & input is a group. so there is no way for it to be Duplicate of that, it is dynamic by nature. thank you – EaBengaluru Commented Sep 12, 2019 at 9:29
• Did you mean chunk upload? – Roy Ryando Commented Sep 12, 2019 at 9:34
• @RoyHabeahan, yes i meant for chunk upload – EaBengaluru Commented Sep 12, 2019 at 9:35

2 Answers 2

Have a look at the api documentation https://github./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 .m-submit-btn handler to this:

 $(".m-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 });
});

})

You should try to set multipart: true

Below is the documentation link.

https://github./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