Fine-Uploader: Getting the original triggered element (clicked, or dropped)

Question

I have one fineuploader instance, and installed a number of drop targets and buttons.

The way I'm arranging this is similar to Google Drive's upload feature, where there is one centralized upload box that lists all the files in progress, and on completion, I would like to do some DOM manipulation on the original triggered elements (drop target, or button), and put a preview, and some details in it.

To do the DOM manipulation, I would like to get the original triggered element.

To make this more clear, here is how I initialized the drag and drop element:

    $('.drop-zone').fineUploaderDnd({
        classes: {
            dropActive: "cssClassToAddToDropZoneOnEnter"
        }
    })
    .on('processingDroppedFiles', function(event) {
        //TODO: display some sort of a "processing" or spinner graphic
    })
    .on('processingDroppedFilesComplete', function(event, files, dropTarget) {
        //TODO: hide spinner/processing graphic

        $gallery_upload.fineUploaderS3('addFiles', files); //this submits the dropped files to Fine Uploader
    });

Here is how I initialized the button:

$gallery_upload.fineUploaderS3({
    ...

    extraButtons: [{
        element: $(".pdf-button"),
        validation: {
            allowedExtensions: ["jpg"]
        }
    }],
    ...

I was reading the documentation on fineuploader, but don't find any variables that explain about the possibilities of this.

I was wondering if this is possible, and if so, please kindly give me some assistance.

Your help is greatly appreciated!

Cheers, Thomas

==============================================

So from the start, I shouldn't have used the separate module: $('.drop-zone').fineUploaderDnd({...

Now, I have modified my code for Dnd to the following, and then, Ray's solution will work nicely with it:

$gallery_upload.fineUploaderS3({
    dragAndDrop: {
        extraDropzones: [ $('.drop-zone') ]
    },
    ...

Answer 1

The onValidate event handler is passed an HTMLElement pointing to the upload button associated with the file. You can also use the getButton API method to find which button is associated with a particular file, given the file's ID.

Fine Uploader also adds a qqDropTarget property on to a dropped File object. The value of this property is the drop zone element that processed the dropped file. This is only done with the integrated DnD (Fine Uploader UI) drop tool (not the standalone). For some reason, this is not documented, I'll have to try to remember why. If this was simply an oversight, I'll add this to the documentation.