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?

Hi Thiezar! I have the same situation and from what I understand if you reimplement the add callback, you will need to somehow trigger the process like in docs example (github.com/blueimp/jQuery-File-Upload/wiki/Options#add). However, when I do that like in the example it the processalways events still does not get triggered. If I stick to the default add implementation it DOES get fired. Wondering whether you figure this one out? — Joni
– Joni, Commented Apr 19, 2014 at 16:02
Oh I figured it out for my case at least: if you re-implement the add callback you should do it as a bind and not as an option (like the author recommends), so it wont override the options for additional resources. So use something like: $('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */}) — Joni
– Joni, Commented Apr 19, 2014 at 16:31
I tried to implement it as a bind too but for some other reasons something else went wrong. So I solved the problem by dropping out jQuery File Upload plugin and using Plupload plugin. With Plupload I was able to do everything as I wanted in no time. — Thiezar
– Thiezar, Commented Apr 19, 2014 at 20:08
Joni's suggestion also fixed my problem. Use on('fileuploadadd') instead of the 'add:' option. — meatrobot
– meatrobot, Commented Jun 23, 2014 at 18:04
I added on('fileuploadadd'), and on("fileuploadprocessalways") but processalways still doesnt fire as I expected :/ — Orhaan
– Orhaan, Commented May 16, 2016 at 8:46

Fractaliste · Accepted Answer · 2013-12-10 11:27:00Z

3

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().

edited Dec 10, 2013 at 11:27

answered Dec 10, 2013 at 10:06

Fractaliste

5,99511 gold badges47 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Thiezar Over a year ago

Sorry I wrote the wrong name for fileuploadadd. I do use data.submit() in the add event. I didn't write in the example just for simplicity. According to the documentation, there is an always event AND a processalways event. But all process events (i.e. process, processstart, processalways, etc.) don't trigger.

Thiezar Over a year ago

I've edited my answer 'couse I realized I actually use data.submit() in my add callback XD

Fractaliste Over a year ago

@Thiezar : You're right, there is a processalways event, I never used it. I don't understand yet the difference between processalways and always but I've read somewhere that the equivalent of the Ajax complete event is the jquery-file-upload's always one's. But it may depend of what you want to do.

Thiezar Over a year ago

Process events just occur during the processing of the file you choose. For example in case of images during process a preview image is generated, resized and cropped. While always event is just calld for completed ajax request. I use processalways to load a preview image next to the choosen file name.

user4767902 · Accepted Answer · 2016-03-04 02:34:08Z

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);
                }
            });
        }
    });
}

Collectives™ on Stack Overflow

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

2 Answers 2

First syntax

Second syntax

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

First syntax

Second syntax

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related