8

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

EaBengaluru
  • 131
  • 2
  • 17
  • 59
  • Why do you use 3 submit buttons ? – Casper Sep 12 '19 at 09:16
  • Possible duplicate of https://stackoverflow.com/questions/19807361/uploading-multiple-files-asynchronously-by-blueimp-jquery-fileupload – Casper Sep 12 '19 at 09: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 Sep 12 '19 at 09:29
  • Did you mean chunk upload? – Roy Ryando Sep 12 '19 at 09:34
  • @RoyHabeahan, yes i meant for `chunk` upload – EaBengaluru Sep 12 '19 at 09:35
  • In this console.log I can see all the files. – Casper Sep 12 '19 at 09:46
  • 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 – Roy Ryando Sep 12 '19 at 09:47
  • @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 – EaBengaluru Sep 12 '19 at 10:01

2 Answers2

6

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

})

DubZ
  • 580
  • 3
  • 12
  • fiddle for what? just update two lines of your code with what I posted some minutes ago?!... http://jsfiddle.net/yzosLme3/ – DubZ Sep 16 '19 at 07:43
  • 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** – EaBengaluru Sep 16 '19 at 09:45
  • 1
    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 – DubZ Sep 16 '19 at 11:07
3

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