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!!!!!!

Hbeam

Why do you use 3 submit buttons ? – Periclean

Possible duplicate of #19807861 – Periclean

@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 – Hbeam

Did you mean chunk upload? – Einhorn

@RoyHabeahan, yes i meant for chunk upload – Hbeam

In this console.log I can see all the files. – Periclean

First make sure your server support for chunk upload, then try to decrase maxChunkSize to 1000 maybe and also increase file tobe uploaded then see in the Network dev tools if the file chunk uploaded – Einhorn

@RoyHabeahan, for me only 1 file post is happening, please post the code if it is working for you. About backend my backend is fully configured for chunk upload – Hbeam

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

})

Prieto

fiddle for what? just update two lines of your code with what I posted some minutes ago?!... jsfiddle.net/yzosLme3 – Prieto

Great Working fine !!!, BUT "Overall Progress"(progressAll) i'm not able to get, can you do any workaround to get progressAll, Please help me thanks in advance – Hbeam

when I use progressall (attention: lower case!) it's working fine. Would be great to mark this post as solution if it is. Thx and good look – Prieto

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

Dryer

i'm using chunk upload, then multipart:true, must be multipart:false in my case – Hbeam