fileuploadadd handler called multiple times

591 views
Skip to first unread message

Janusz Dalecki

unread,
Dec 9, 2013, 8:20:53 PM12/9/13
to jquery-f...@googlegroups.com

Hi Everybody,

I have tried to keep this code tight – so did not put everything that is there in real view.

My problem with this code is that my method 'fileuploadadd' gets called whenever I click on  $(".btn.btn-primary.start") button plus all the ones from the past (so if I click very first time it’s called once, then if I click it again it gets called twice, with the data from previous call plus the current one).

As you can see I am unbinding 'fileuploadadd' after each time click handler is called.

I want it to be called only for the current data.

What am I doing wrong?

 

define(['jquery', 'backbone', 'jquery.fileupload', 'text!tpl/Upload.html'], function ($, Backbone, FileUpload, addItemTemplate) {

      // Item View for single item

  var FileUpload = Backbone.View.extend({

    el: $("#editor"),

    render: function() {

      $(this.el).fileupload({

        filesContainer: $('.files'),

        uploadTemplateId: null,

        downloadTemplateId: null,

        url: urlStr,

        uploadTemplate: function(o) {

          var rows = $();

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

var row = $('<tr class="template-upload fade">' + '<td class="name"></td>' + '<td class="size"></td>' + (file.error ? '<td class="error" colspan="2"></td>' : '<td><button type="button" class="btn btn-mini btn-info">' + '<i class="icon-thumbs-up"></i>' + '<span></span>' + '</button></td>'));

            row.find('.name').text(file.name);

            row.find('.size').text(o.formatFileSize(file.size));

            if (file.error) {

              row.find('.error').text(locale.fileupload.errors[file.error] || file.error);

            }

            rows = rows.add(row);

          });

          return rows;

        },

 

      }).bind('fileuploadadd', function(e, data) {

        console.log("value", 'Adding...');

        $(".btn.btn-primary.start").bind("click", function() {

          e.preventDefault();

          console.log("value", 'Uploading...');

          data.formData = new FormData();

          if (data.files[0].name == "assets.xml") {

            data.formData.append('id', "upload-asset");

          } else if (data.files[0].name == "products.xml") {

            data.formData.append('id', "upload-product");

          } else if (data.files[0].name == "productproducts.xml") {

            data.formData.append('id', "upload-productproduct");

          }

          data.submit();

          $(this.el).unbind('fileuploadadd');

        });

      }).bind('fileuploadprogress', function(e, data) {

      }).bind('fileuploadfailed', function(e, data) {

      });

    }

return FileUpload;

});

Andrew R

unread,
Mar 16, 2015, 5:06:54 PM3/16/15
to jquery-f...@googlegroups.com
Did you find a solution to this? This is the most common question on this board and I haven't found a single clear answer.

Łukasz Tenerowicz

unread,
Apr 8, 2015, 10:43:48 AM4/8/15
to jquery-f...@googlegroups.com
It is because the jQuery event is bound to the button


$(".btn.btn-primary.start").bind("click", function() {

Everytime you change the file without uploading, the new jQuery event is registered so when you finally click that button, the code is triggered for every file ever selected. 

Developer User

unread,
Jan 10, 2019, 1:36:03 PM1/10/19
to jQuery-File-Upload
So.. the solution is?
Reply all
Reply to author
Forward
0 new messages