Why don't jQuery File Upload plugin's process events trigger?

Question

I have a weird problem with jQuery File Upload plugin. If I use this sitax:

$('fileupload').fileupload({
  url: myurl,
  add: function(e, data){
    console.log("add event");
  },
  processalways: function(e, data){
    console.log("processalways event");
  }
});

processalways event don't occur, but I got correct data.context variable (i.e. the div with the progress bar of the added file).

While when I use this sintax

$('fileupload').fileupload({
  url: myurl
}).on('fileuploadadd',function(e, data){
    console.log("add event");
}).on('fileuploadprocessalways', function(e, data){
    console.log("processalways event");
});

processalways event correctly occur, but I got wrong data.context (I think in this case data.context will always refer to $('fileupload') element.

I need both process event and data.context variable. How can I do?

Answer 1

First syntax

If you want to start the process you have to call data.submit(); into the add fnction.

Then you can't call a processalways callback, according to the documentation it's always which should be used :

$('input').fileupload({
    url: "/echo/json",
    add: function (e, data) {
        console.log("Add callback");
        $('#start_upload').click(function(){
            data.submit();
        });
    },
    always: function (e, data) {
        console.log("Always callback");
    }
});

Second syntax

I've never use it, but if it works it's because fileuploadd doesn't exist. And so it's the default fileuploadadd which is used, and it may call data.submit().

Answer 2

I had read a bit code in jquery.fileupload-ui.js

Maybe this is what you want?

// The add callback is invoked as soon as files are added to the fileupload
// widget (via file input selection, drag & drop or add API call).
// See the basic file upload widget for more information:
add: function (e, data) {
    if (e.isDefaultPrevented()) {
        return false;
    }
    var $this = $(this),
        that = $this.data('blueimp-fileupload') ||
            $this.data('fileupload'),
        options = that.options;
    data.context = that._renderUpload(data.files)
        .data('data', data)
        .addClass('processing');
    options.filesContainer[
        options.prependFiles ? 'prepend' : 'append'
        ](data.context);
    that._forceReflow(data.context);
    that._transition(data.context);
    data.process(function () {
        return $this.fileupload('process', data);
    }).always(function () {
        data.context.each(function (index) {
            $(this).find('.size').text(
                that._formatFileSize(data.files[index].size)
            );
        }).removeClass('processing');
        that._renderPreviews(data);
    }).done(function () {
        data.context.find('.start').prop('disabled', false);
        if ((that._trigger('added', e, data) !== false) &&
            (options.autoUpload || data.autoUpload) &&
            data.autoUpload !== false) {
            data.submit();
        }
    }).fail(function () {
        if (data.files.error) {
            data.context.each(function (index) {
                var error = data.files[index].error;
                if (error) {
                    $(this).find('.error').text(error);
                }
            });
        }
    });
}