JQuery File upload plugin issue when configuring multiple drop zones with single file container

Question

I am using the jQuery File Upload plugin https://github.com/blueimp/jQuery-File-Upload

What I am trying to achieve is: The files container is in a tab, so files should be added when they are dropped on the tab as well as when they are dropped on the actual file container.

I could able to configure two dropzones with a single file container with the below initialization by giving same class to the tab li element and also to the form where the files container tbody is present. Upload template is rendering properly for both cases when dropping the files on the tab as well as on the actual files container

    $('.fileupload').each(function() {
        var fileContainerElement;

        if($(this).is("li")){
            fileContainerElement = $($(this).find("a").attr("href")).find('table[role="presentation"]').find("tbody.files");
        } else{
            fileContainerElement = $(this).find("tbody.files");
        }

        $(this).fileupload({
            filesContainer: $(fileContainerElement),
            dropZone : $(this)
        });

    });        

The problem I am facing is: Upload is not working for the files which are dropped on the tab but they are working fine for the files dropped directly on to the files container form.

Reason for this issue which I have observed is: For the files which are dropped on the tab while submitting its taking different action which is not the upload servlet which is configured for this component. I tried to validate the generated html by inspecting each row which are created by dropping the files on tab also on the form but i don't see any differences regarding the generated html, they are generated as per the download template with the same class names without any issue.

I tried to include the add call back method to the initialization, to specify the servlet path but that is also not taking the effect.

Could you please help me in understanding why this is happening like this and also are there any additional configurations I need to do to correct this issue.

Answer 1

I got the solution. Posting it in case it might help some one who has similar issue.

The reason was I am trying to configure the file upload plugin on the drop zone and specifying the file container to that. But it has to be done in a reverse way

Initialize fileupload plugin on the form which is the files container and specify dropzone to it.

I couldnt find a way to specify two drop zones for one initialization so I gave same class names to those two dropzones and specified the selector based on the class and that solved the issue.

Below is the final initialization which is working: dropZoneElementClassName is the same class name used for both li element and the actual form element.

    $('form.fileupload').each(function() {
        $(this).fileupload({
            var dropZoneElement;
            dropZoneElement = $(".dropZoneElementClassName");
            filesContainer : $(this).find("tbody.files"),
            dropZone : dropZoneElement
        });
    });