How to use multiple fineuploader instances with manual upload buttons with one template

Question

With the fine-uploader plugin I am trying to add multiple (dynamic could be 1, or 10) instances with an optional caption field and a manual upload button per section.

The form I am uploading from is dynamically generated in layout as well as content, the uploaded files have to be stored by the handler based upon the section of the form as well as the instance of fine-uploader. I also need the ability to effectively upload each instance of fine-uploader independently

The issue that I am hitting is following the guidelines & demo for the manual upload option, ie adding a click function it will always find only the first instance as it searches for the button using .getElementById.

I can get around this by defining a new template for each instance however I would prefer to use a single template.

The template code (for each instance - abbreviated for simplicity) is

<script type="text/template" id="qq-template-manual-trigger#XX#">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
...
    <div class="buttons">
        <div class="qq-upload-button-selector qq-upload-button">
            <div>Select files</div>
        </div>
        <button type="button" id="trigger-upload#XX#" class="btn btn-primary">
            <i class="icon-upload icon-white"></i> Upload
        </button>
    </div>
...
    <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
        <li>
...
            <input class="caption" tabindex="1" type="text">
...
        </li>
    </ul>
...
</div>
</script>
<div id="fine-uploader-manual-trigger#XX#"></div>

and the uploader script

<script>
var manualUploader#XX# = new qq.FineUploader({
        element: document.getElementById('fine-uploader-manual-trigger#XX#'),
        template: 'qq-template-manual-trigger#XX#',
        request: {
            inputName: "imagegroup[]",
            endpoint: '/SaveFile.aspx'
        },

        autoUpload: false,
        debug: true,
        callbacks: {
    onError: function(id, name, errorReason, xhrOrXdr) {
        alert(qq.format("Error on file number {} - {}.  Reason: {}", id, name, errorReason));
    },
    onUpload: function (id) {
                var fileContainer = this.getItemByFileId(id)
                var captionInput = fileContainer.querySelector('.caption')
                var captionText = captionInput.value

                this.setParams({
                    "descr[]": captionText,
                    <-- Other parameters here -->
                }, id)
            }
        },
    });


    qq(document.getElementById("trigger-upload#XX#")).attach("click", function () {
        manualUploader#XX#.uploadStoredFiles();
    });

</script>

in the ideal world I would prefer simply have a single

<script  type="text/template" id="qq-template-manual-trigger">
....
</script>

then where required multiple times through the form

<div id="fine-uploader-manual-trigger"></div>
<script>
var manualUploader#XX# = new qq.FineUploader({
        element: document.getElementById('fine-uploader-manual-trigger'),
        template: 'qq-template-manual-trigger',
...
}
    qq(document.getElementById("trigger-upload")).attach("click", function () {
        manualUploader#XX#.uploadStoredFiles();
    });
</script>

The use of the attach function by calling .getElementById just feels wrong, or at the very least cludgy, is there a better way of activating the upload on a per-instance basis?

Thanks in advance K

Answer 1

Sorted, but if anyone has a better answer...

Instead of using the demo of document.getElementById("trigger-upload")

Simply use document.querySelector("#fine-uploader-manual-trigger #trigger-upload")

eg

<div id="fine-uploader-manual-triggerXX"></div>

<script>
    var manualUploaderXX = new qq.FineUploader({
    element: document.getElementById('fine-uploader-manual-triggerXX'),
    template: 'qq-template-manual-trigger',
    ... // omitted for brevity 
    }

    qq(document.querySelector("#fine-uploader-manual-triggerXX #trigger-upload")).attach("click", function () {
       manualUploaderXX.uploadStoredFiles();
    });
</script>