Get Total Number of Files To Be Submitted - File Upload Basic

[Bob Fury]

Hi,

I'm using the File Upload Basic plugin to manage my file uploads. I'm having a problem determining the total of number of files that are queued to upload though. I'm not initiating the upload until the user clicks a button. Every time I add a file, I'm adding a link to a div so the user can remove the file before they initiate the upload. My problem is that the data.files array only contains one file when I'm in the add callback, so the index is off an the user isn't able to remove files. I need to access the correct index for the file queued to upload, so I can remove it later. I think I'm missing something simple... Here's the code I'm using in my add callback to try and get the index in the data.files array:

add: function (e, data) {

                console.log("Number of files: " + data.files.length);

                

                $.each(data.files, function (index, file) {

                    $('#uploadFilesBox').append("<div class='uploadBox' id='fileDiv" + index + "'><div class='leftEle'><a href='#' id='" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>")

                        .on('click', { indx: index, files: data.files }, function (event) {

                            

                            var uploadFilesBox = $("#uploadFilesBox");

                            var remDiv = $("div#fileDiv" + event.data.indx);

                            remDiv.remove();

                            files.splice(indx, 1);

                            $('#PrerequisiteProcessingForm').fileupload('destroy');

                                                    

                        });

                });

Note the console log is always 1, no matter how many files the user has queued to upload. What am I missing?

Thanks!

[Robert]

Helps if I include the correct code...

 add: function(e, data) {

                console.log("Number of files: " + data.files.length);

                $.each(data.files, function(index, file) {

                    $('#uploadFilesBox').append("<div class='uploadBox' id='fileDiv" + index + "'><div class='leftEle'><a href='#' id='" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>")

                        .on('click', { indx: index, files: data.files }, function(event) {

                            var uploadFilesBox = $("#uploadFilesBox");

                            var remDiv = $("div#fileDiv" + event.data.indx);

                            remDiv.remove();

                            event.data.files.splice(event.data.indx, 1);                                                  

                        });

                });

                data.context = $('.btn-upload-small-dsbl').css("background-position", "0px 0px").removeAttr("disabled")

                    .click(function() {

                        //$(this).replaceWith($('<p/>').text('Uploading...'));

                        data.submit();

                    });

                filesIndex++;

            },