FineUploader - add data-id to preview li

Question

I'm trying to user jQuerySortable and FineUploader. I have following callback on FineUploader:

callbacks: {
    onComplete: function(id, name, response) {
        this.setDeleteFileParams({
            attachment_id: response.attach_id,
            action: 'delete_attachment',
            nonce: response.delete_nonce
        }, id);

        $(".qq-upload-list-selector").sortable({
            onDrop: function (item, container, _super) {
                var data = $(".qq-upload-list-selector").sortable("serialize").get();
                var jsonString = JSON.stringify(data, null, ' ');
                console.log(jsonString);
                _super(item, container)
            }
        });
    }
}

The jQuerySortable uses data-id for the serialize method, so I would need to add it to the preview li in the onComplete callback. How can this be done?

Answer 1

First, get a handle on the file container element, then, find the appropriate child element. Finally, add the desired attribute.

callbacks: {
    onComplete: function(id, name, response) {
        var fileContainer = this.getItemByFileId(id),
            $child = $(fileContainer).find("{{CHILD ELEMENT SELECTOR HERE}}");

        $child.attr("data-id", response.attach_id);
    }
}