FineUploader multiple instances and dynamic naming

问题:

I am using FineUploader 4.0.8 within a MVC4 project using the jquery wrapper. Here is an example of my js code that creates a single instance of the fineUploader and is working just fine. At this time, I have the need for more than one instance of fineUploader, but each individual control doesn't know anything about the other and they're rendered as needed on a page (I've seen previous questions using a jQuery .each, which won't work here). Currently, I can't seem to correctly render any upload buttons, probably due to having an ID duplicated or something. See below for how I'm using MVC's Razor to create unique variables and html IDs for that individual instance.

Here's my current implementation where I've added the dynamic values (places where you see _@Model.{PropertyName}):

// Uploader control setup
    var [e-mail] = $('#[e-mail]').fineUploader({
        debug: true,
        template: '[e-mail]',
        button: $("#[e-mail]"),
        request:
        {
            endpoint: '@Url.Action("UploadFile", "Survey")',
            customHeaders: { Accept: 'application/json' },
            params: {
                [e-mail]: (function () { return instance; }),
                [e-mail]: (function () { return surveyItemResultId; }),
                [e-mail]: (function () { return itemId; }),
                [e-mail]: (function () { return loopingCounter++; })
            }
        },
        validation: {
            acceptFiles: ['image/*', 'application/xls', 'application/pdf', 'text/csv', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'],
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp', 'csv', 'xls', 'xlsx', 'pdf', 'xlt', 'xltx', 'txt'],
            sizeLimit: 1024 * 1024 * 2.5, // 2.5MB
            stopOnFirstInvalidFile: false
        },
        failedUploadTextDisplay: {
            mode: 'custom'
        },
        multiple: true,
        text: {
            uploadButton: 'Select your upload file(s)'
        }
    }).on('submitted', function (event, id, filename) {
        $("#modal-overlay").fadeIn();
        $("#modal-box").fadeIn();
        [e-mail]++;
        $(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled');
    }).on('complete', function (event, id, filename, responseJSON) {
        [e-mail]++;
        if ([e-mail] == [e-mail]) {
            $(':input[type=button], :input[type=submit], :input[type=reset]').removeAttr('disabled');
            //$("#overlay").fadeOut();
            $("#modal-box").fadeOut();
            $("#modal-overlay").fadeOut();
        }
    }).on('error', function (event, id, name, errorReason, xhr) {
        //$("#overlay").fadeOut();
        alert('error: ' + errorReason);
        $("#modal-box").fadeOut();
        $("#modal-overlay").fadeOut();
    });
});

Using the same principle as above, I've added this logic to the template too.

EDIT - Added the entire template below:

 <script type="text/template" id="[e-mail]">
    <div class="qq-uploader-selector qq-uploader">
        <div class="qq-upload-drop-area-selector qq-upload-drop-area qq-hide-dropzone">
            <span>Drop files here to upload</span>
        </div>
        <div class="qq-upload-button-selector qq-upload-button">
            <div>Click here to select your upload file(s)</div>
        </div>
        <span class="qq-drop-processing-selector qq-drop-processing">
            <span>Processing dropped files...</span>
            <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
        </span>
        <ul class="qq-upload-list-selector qq-upload-list">
            <li>
                <div class="qq-progress-bar-container-selector">
                    <div class="qq-progress-bar-selector qq-progress-bar"></div>
                </div>                   
                <span class="qq-upload-file-selector qq-upload-file"></span>
                <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            </li>
        </ul>
    </div></script>

What I see when I use the above code is only the drag and drop section visible, and no button. There are no js errors either.

I do have an example that only has one instance of this control on it and the results are the same visible drag and drop section and no button). Any thought as to what's going on? I'll gladly update the question if you find I'm missing something helpful. Please don't just -1 me if it's something I can easily improve or fix.

回答1:

If you aren't seeing an upload button, then a properly marked button is not present in your template. That seems to be the case in the template you have provided. If your actual template does contain an properly marked upload button, then your template is either not referenced correctly in the template option, or your template is not properly rendered on your page before your Fine Uploader instance is constructed.

回答2:

Here is what I'm currently doing for my multiple implementation of the upload control:

I have some divs that are listed elsewhere that contain 'Loading' text (IDs: modal-box, modal-overlay). They appear based on how many files need to be uploaded and disappear when they're all complete. Keeps the user from clicking over and over, you know how that is...

JS:

var [e-mail] = $('#[e-mail]').fineUploader({
        debug: true,
        template: '[e-mail]',
        button: $("#[e-mail]"),
        request:
        {
            endpoint: '@Url.Action("UploadFile", "Survey")',
            customHeaders: { Accept: 'application/json' },
            params: {
                surveyInstanceId: (function () { return [e-mail]; }),
                surveyItemResultId: (function () { return [e-mail]; }),
                itemId: (function () { return [e-mail]; }),
                loopingIndex: (function () { return [e-mail]++; })
            }
        },
        validation: {
            acceptFiles: ['image/*', 'application/xls', 'application/pdf', 'text/csv', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'],
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp', 'csv', 'xls', 'xlsx', 'pdf', 'xlt', 'xltx', 'txt'],
            sizeLimit: 1024 * 1024 * 2.5, // 2.5MB
            stopOnFirstInvalidFile: false
        },
        failedUploadTextDisplay: {
            mode: 'custom'
        },
        multiple: true,
        text: {
            [e-mail]: 'Select your upload file(s)'
        }
    }).on('submitted', function (event, id, filename) {
        $("#modal-overlay").fadeIn();
        $("#modal-box").fadeIn();
        [e-mail]++;
        $(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled');
    }).on('complete', function (event, id, filename, responseJSON) {
        [e-mail]++;
        if ([e-mail] == [e-mail]) {
            $(':input[type=button], :input[type=submit], :input[type=reset]').removeAttr('disabled');
            //$("#overlay").fadeOut();
            $("#modal-box").fadeOut();
            $("#modal-overlay").fadeOut();
        }
    }).on('error', function (event, id, name, errorReason, xhr) {
        //$("#overlay").fadeOut();
        alert('error: ' + errorReason);
        $("#modal-box").fadeOut();
        $("#modal-overlay").fadeOut();
    });
});

HTML: I added dynamic IDs to most of the DIVs within, though I'm not exactly sure it matters. When I drag and drop, all instances will show the drop area as the hover changes the div by class. This isn't a big deal for me, but expect this.

 <script type="text/template" id="[e-mail]">
    <div id="[e-mail]" class="qq-uploader-selector qq-uploader">
        <div id="[e-mail]" class="qq-upload-drop-area-selector qq-upload-drop-area" **qq-hide-dropzone**>
            <span>Drop files here to upload</span>
        </div>
        <div id="[e-mail]" class="qq-upload-button-selector qq-upload-button">
            <div>Click here to select your upload file(s)</div>
        </div>
        <span id="[e-mail]" class="qq-drop-processing-selector qq-drop-processing">
            <span>Processing dropped files...</span>
            <span id="[e-mail]" class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
        </span>
        <ul id="[e-mail]" class="qq-upload-list-selector qq-upload-list">
            <li>
                <div id="[e-mail]" class="qq-progress-bar-container-selector">
                    <div class="qq-progress-bar-selector qq-progress-bar"></div>
                </div>                   
                <span class="qq-upload-file-selector qq-upload-file"></span>
                <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            </li>
        </ul>
    </div>