Как создать плагин JQuery из нескольких элементов управления

Question

Я создал плагин jquery для контроля загрузки файлов.Пользователь может загрузить файл, и этот файл сохраняется на сервере.Файл установлен в структуре папок проекта / родителя.

Сейчас я пытаюсь выяснить, как изменить этот плагин, чтобы разрешить несколько экземпляров загрузки файла на одной странице.

Обычно это только один файл на страницу, но теперь я хочу прикрепить этот файл к нескольким частям на странице.

Мне известен раздел в плагине, в который я записываю файлы ('body').find () является проблемой, но я не уверен, как получить доступ к лучшей области для селектора.

Любая помощь приветствуется!

$(function () {
        $('[data-toggle="tooltip"]').tooltip();

        $('.fileupload').FileUpload({
            project: 'ISOAudits',
            parent: $('#MainContent_lblISOAuditNumber').text()
        });
    })

Ниже приведен плагин.

    (function ($) {

    $.fn.FileUpload = function (options) {

        var settings = $.extend({
            project: 'Default',
            parent: '1'
        }, options);

        var elem = document.createElement('div');
        elem.innerHTML =
            '<div class="card bg-light p-3 m-3 fileupload">' +
                '<fieldset>' +
                    '<legend>Associated Files</legend>' +
                    '<div class="col-12">' +
                        '<div class="row">' +
                            '<div>' +
                                '<label for="fileUpload" />' +
                                'Select File to Upload:' +
                                '<input id="fileUpload" type="file" />' +
                                '<input id="btnUploadFile" type="button" value="Upload File" onclick="$(this).UploadFile(\'' + settings.project + '\', \'' + settings.parent + '\');" />' +
                            '</div>' +
                        '</div>' +
                        '<div class="row">' +
                            '<table class="table table-sm">' +
                                '<thead>' +
                                    '<tr>' +
                                        '<th>File Name</th>' +
                                        '<th>File Size</th>' +
                                        '<th>Created On</th>' +
                                        '<th>&nbsp;</th>' +
                                    '</tr>' +
                                    '<tbody class="FileUploads">' +
                                    '</tbody>' +
                                '</thead>' +
                            '</table>' +
                        '</div>' +
                    '</div>' +
                '</fieldset>' +
            '</div>';

        return this.append(elem).GetFilesForParent(settings.project, settings.parent);
    }

    $.fn.GetFilesForParent = function (project, parent) {
        $.ajax({
            url: "server/GetUploadedFilesForParent",
            dataType: "json",
            type: "GET",
            data: { 'ProjectFolder': project, 'ParentFolder': parent },
            success: function (data) {
                var scrub = JSON.parse(data);

                var $tbody = $('body').find('.FileUploads');
                $tbody.empty();

                for (var i = 0; i < scrub.length; i++) {
                    var row = $('<tr>');
                    row.append($('<td>').html('<a href="#" onclick="$(this).OpenServerFile(\'' + project + '\',\'' + parent + '\', \'' + scrub[i].FileName + '\');">' + scrub[i].FileName + '</a>'));
                    row.append($('<td>').html(scrub[i].FileSize));
                    row.append($('<td>').html(scrub[i].CreatedOn));
                    row.append($('<td>').html('<a href="#" onclick="$(this).DeleteFile(\'' + scrub[i].FileName + '\', \'' + project + '\', \'' + parent + '\');" class="btn btn-danger btn-sm");"><i class="fa fa-trash"></i></a>'));

                    $tbody.append(row);

                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    }



    $.fn.UploadFile = function(project, parent) {
        var files = $("#fileUpload").get(0).files;

        var data = new FormData();

        // Add the uploaded image content to the form data collection
        if (files.length > 0) {
            data.append("UploadedFile", files[0]);
        }

        data.append("ProjectFolder", project);
        data.append("ParentFolder", parent);

        // Make Ajax request with the contentType = false, and procesDate = false
        $.ajax({
            type: "POST",
            url: "server/FileUpload",
            contentType: false,
            processData: false,
            data: data,
            success: function (data) {
                $(this).GetFilesForParent(project, parent);
            }
        });
    }

    $.fn.DeleteFile = function (filename, project, parent) {
        $.ajax({
            url: "server/DeleteFileFromServer",
            dataType: "json",
            type: "GET",
            data: { 'ProjectFolder': project, 'ParentFolder': parent, 'FileName': filename },
            success: function (data) {
                $(this).GetFilesForParent(project, parent);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    }

    $.fn.OpenServerFile = function (project, parent, filename) {
        window.open('server/OpenServerFile?ProjectFolder=' + project + '&ParentFolder=' + parent + '&FileName=' + filename, '_blank');
    }

}(jQuery));