1

Given the following demo:

jQuery File Upload Basic Plus demo

I have this working in a project as per the demo, but I'd like to remove the "Upload" button on each image and just add an "Upload All" button at the top. For the life of me I can't work out how to do it and the documentation is pretty thin...

I've tried to create a handle to the fileupload object e.g. var fileUpload = $('#fileupload').fileupload({ and call something like fileUpload.send(); but I just get "object doesn't contain a method 'send'"

Rob
  • 10,004
  • 5
  • 61
  • 91

2 Answers2

2

The working solution is here: Start Upload all in jquery file upload blueimp

The key is unbinding the click event in the "done" option and not in the "add" option as other articles here suggest.

done: function (e, data) {
        $("#uploadBtn").off('click')
        $.each(data.result, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    },
add: function (e, data) {
        $("#uploadBtn").on('click',function () {
            data.submit();
        });
    }

Another option is to give the individual upload buttons a class, hide them from view by setting their css display to none and then binding their click to the upload_all click:

//Put this button code next to your button (or span mimicking button) that adds files to the queue.
<button id="upload_all" type="submit" class="btn btn-primary start">
    <i class="glyphicon glyphicon-upload"></i>
    <span>Start upload</span>
</button>

//Give your buttons a class and set their display to none.
var uploadButton = $('<button/>', { 
                       class:"upload", 
                       style:"display:none" 
                   })
                   .on('click', function () {
                        var $this = $(this),
                        data = $this.data();
                        data.submit().always(function () {      
                            $this.remove();
                        });
                   });

//Bind their click to the click of your upload_all button. 
$('#upload_all').on('click', function() {
     $('.upload').click();
});
Community
  • 1
  • 1
Joshua Hutchison
  • 229
  • 2
  • 9
1

You can push all the data into an array and have your external button call a function that loops through the array and call .submit() on each.

var fileDataArray = [];

// Inside "add" event
fileDataArray.push(data);

// Inside your onClick function for your button
for (var i = 0; i < fileDataArray.length; i++) {
    var data = fileDataArray[i];
    data.submit();
}
cstsui
  • 144
  • 5