LPology / Simple-Ajax-Uploader

Javascript file upload plugin with progress bar support. Works in all major browsers, including IE7+, Chrome, Firefox, Safari, and Opera. No dependencies - use it with or without jQuery.
995 stars 267 forks source link

Uploading multiple files dont work #188

Closed roj4s closed 7 years ago

roj4s commented 7 years ago

Set autoSubmit to false and call uploader.submit() foreach file in the _queue. However for more than 3 files won't work. Please help me out with this pleaseee..... Here is my code:

var errors = []; var files_sent_successfully = 0; var total_files_to_be_sent = 0;

        var uploader = new ss.SimpleUpload({
            button: 'chooseFileBtn',
            url: paths.createpath,
            name: 'uploadfile',
            multipart: true,
            multiple: true,
            hoverClass: 'hover',
            focusClass: 'focus',
            autoSubmit: false,
            responseType: 'json',
            startXHR: function() {
                progressOuter.style.display = 'block';
                this.setProgressBar( progressBar );
            },
            onChange:function(filename){

                var file_input_text = filename;

                $("#uploadFileModal").find(".btn-primary").prop('disabled', false);

                total_files_to_be_sent = uploader._input.files.length;
                if(total_files_to_be_sent > 1)
                    file_input_text = total_files_to_be_sent+" files selected";

                $("#uploadFileModal").find("#filePathInput").val(file_input_text);

            },
            onBlankSubmit:function(){
                console.log("OnBlakSubmit");

            },
            onSubmit: function(filename) {

                sendbtn.innerHTML = 'Uploading...';
                this.setOptions({data: {
                        //
                        parent_id:current_path==null?-1:current_path,
                        repository_id:current_repo==null?-1:current_repo,
                        is_upload_file: true,
                        name: filename

                    }});

                console.log("Submiting: " + filename);

            },
            onComplete: function( filename, response ) {

                if ( response.success === true ){
                    files_sent_successfully ++;
                    console.log("OnComplete: " + filename + " success" );
                }
                else{
                    console.log("OnComplete: " + filename + " error" );
                    errors.push(response.msg);
                }

                if((errors.length + files_sent_successfully) - total_files_to_be_sent == 0){

                    console.log("End with all submits");

                    progressOuter.style.display = 'none';

                    if(files_sent_successfully != 0 && errors.length !=0)
                        showAlertMessage("info", files_sent_successfully+ " files uploaded successfully");
                    else if(files_sent_successfully != 0 && errors.length > 0)
                        showAlertMessage("info", files_sent_successfully+ " files uploaded successfully but some uploads didn't succed");
                    else
                        showAlertMessage("error", "Files couldn't be uploaded");

                    $("#uploadFileModal").modal("hide");
                    $("#uploadFileModal").find("#filePathInput").val("");
                    updateGuiData();

                    errors = [];
                    files_sent_successfully = 0;
                    total_files_to_be_sent = 0;

                }
            },
            onError: function(filename, type, status, statusText, response, uploadBtn, size) {

                console.log("onError");
                $("#uploadFileModal").find("#filePathInput").val("");
                sendbtn.innerHTML = 'Upload file';
                progressOuter.style.display = 'none';

                $("#uploadFileModal").modal("hide");
                showAlertMessage("error", "Couldn't communicate with server.");

                errors = [];
                files_sent_successfully = 0;
                total_files_to_be_sent = 0;
            }
        });

        $(document).off('click', '#uploadBtn').on('click', '#uploadBtn', function(){

            var total = total_files_to_be_sent;

            console.log("Will send " + total);

            for(i =0;i < total; i++){

                console.log("submit executed in for " + i);
                uploader.submit();

            }
        });

And the logs are:

Will send 6 75d3678_index_6.js:1093 submit executed in for 0 75d3678_index_6.js:1012 Submiting: SDK_Suite.log 75d3678_index_6.js:1093 submit executed in for 1 75d3678_index_6.js:1012 Submiting: protocolonet24jan201713138 75d3678_index_6.js:1093 submit executed in for 2 75d3678_index_6.js:1012 Submiting: missfont.log 75d3678_index_6.js:1093 submit executed in for 3 75d3678_index_6.js:1093 submit executed in for 4 75d3678_index_6.js:1093 submit executed in for 5 75d3678_index_6.js:1029 OnComplete: missfont.log error 75d3678_index_6.js:1029 OnComplete: SDK_Suite.log error 75d3678_index_6.js:1029 OnComplete: protocolonet24jan201713138 error

roj4s commented 7 years ago

Solved: Seems maxUploads is set to 3 by default, setting it to a big number solved the problem.