1

I am experiencing issues with the jQuery File Uploader (blueimp):

My implementation is fully customized. I use image previews and validation.

My problem is that even though i am defining data.context in my fileuploadadd event, it comes in empty when fileuploadprogress is fired.

$('fileinput-element').fileupload({
    url: '/__module/uploadModule/receive',
    type: 'post',
    acceptFileTypes: acceptedFileRegEx,
    dataType: 'json',
    'dropZone': $(dropZone),
    paramName: 'files',
    autoUpload: false,
}).on('fileuploadadd', function (e, data) {

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

        // NOTE: This function call returns a clone of an element that i use as template for upload list items. Works fine.
        var component=uploadModule.getDynamicComponent('listItemContainer');

        // Filling the template (code omitted due to better readabilty)

        // Appending the component to my #uploadList and assigning that to data.context
        data.context = component.appendTo('#uploadList');

    });

    // For manual submittion later on, i fill an array with the data objects from each event call
    dataList.push(data);

}).on('fileuploadprocessalways', function(e,data){

    var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);

    // Further code ommitted due to readability. Here i apply file.preview and (potential) file.error to my list item that is now stored in the variable node. This works fine. My list renders perfectly well.

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

    // PROBLEM: data.context is EMPTY ! Why???
    console.log(data.context);

});

And this is how i submit everything upon clicking a start upload button:

$(dataList).each(function(){
    this.submit();
});

// This works well - the uploads are being submitted and sent to the server.

I have done extensive solution searching, testing, trial & error, debugging for 1.5 days now. I just can't wrap my head around this.

What am i doing wrong?

Please note: If i do a data.submit() right inside the add event callback, then data.context is filled correctly when the progress event fires, but i am no longer left with the option of manually launching the entire upload queue.

1 Answer 1

11

The solution to this problem was quite a surprise:

My load order for the fileupload component and plugins was:

jquery
jquery-ui (for the widget
load-image.js
iframe-transport.js
fileupload.js
fileupload-process.js
fileupload-image.js
fileupload-validate.js
fileupload-ui.js

And the last one (fileupload-ui.js) was the pitfall. I thought i had to include it for my implementation of the uploader, but i didn't. Seems i misunderstood what it was for.

The moment i removed it, my script / implementation started working, data.context now gets populated correctly.

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

2 Comments

oh thank bob I wasn't the only one with this problem ... now wth would i need that file for and why does it scrub .context?
I had this exact issue and your solution worked for me. funny is, on another site I had this file included and had no issues. probably the reason behind this error is probably that the -ui file has to be included only if you are using jQuery-ui However, on the site where it was working I had JQuery2.0.3, while on the other I have jQuery2.1.0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.