CODEWITHSUNDEEP
jqueryfine-uploader
Clemorphy
Clemorphy

Reputation: 474

FineUploader : add upload buttons in template markup

With the fineUploader jQuery plugin, I am trying to add several upload buttons in my fineUploader template.

But it seems that the extraButtons option does not look for elements inside the template, only inside the DOM, before the template is being added to the DOM.

http://docs.fineuploader.com/features/extra-buttons.html

So if the extraButtons elements are inside the template, fineUploader does not find them.

I don't want to add my buttons outside my template ... Can fineUploader target extraButtons inside a template ?

My fineUploader instanciation looks like this :

$("#fine-uploader").fineUploader({
        debug : true,
        extraButtons: [
            {element: $('#upload-pictures-btn1')},
            {element: $('#upload-pictures-btn2')},
            {element: $('#upload-pictures-btn3')}
        ],
        request: {
            endpoint: '/publish/upload'
        }
    });

And my fineUploader template looks like this :

<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader">
    <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
        <span class="qq-upload-drop-area-text-selector"></span>
    </div>
    <div class="qq-upload-button-selector qq-upload-button">
        Add file
    </div>

    <div class="upload-pictures-btns">
        <div id="upload-pictures-btn1"></div>
        <div id="upload-pictures-btn2"></div>
        <div id="upload-pictures-btn3"></div>
    </div>

    <span class="qq-drop-processing-selector qq-drop-processing">
        <span>Uploading ...</span>
        <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
    </span>
    <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
        <li>
            <div class="qq-progress-bar-container-selector">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
            </div>

            <span class="qq-upload-thumb">
                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                <img class="qq-thumbnail-selector" qq-max-size="365" qq-server-scale>
            </span>

            <span class="qq-upload-info">
                <span class="qq-upload-file-selector qq-upload-file"></span>
                <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                <span class="qq-upload-size-selector qq-upload-size"></span>
            </span>

            <span class="qq-btns-wrapper">
                <button type="button" class="btn qq-btn qq-upload-cancel-selector qq-upload-cancel">Annuler</button>
                <button type="button" class="btn qq-btn qq-upload-retry-selector qq-upload-retry">Re-essayer</button>
                <button type="button" class="btn qq-btn qq-upload-delete-selector qq-upload-delete">Supprimer</button>
            </span>

            <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
        </li>
    </ul>

</div>

JS error at instanciation : Uncaught TypeError: Cannot read property 'style' of undefined

If I move the 3 extra buttons out of the template, and put them directly in my HTML markup, it works. But I need them to be IN the template.

Upvotes: 2

Views: 1427

Answers (1)

Ray Nicholus
Ray Nicholus

Reputation: 19890

One issue is with your code. You are selecting elements from the DOM before Fine Uploader has even initialized. Of course these elements do not yet exist before an instance of Fine Uploader is created, since you have defined them in your template.

Currently, you must pass an Element to Fine Uploader when setting up your extraButton options, but there is an open proposal to make this a bit more flexible. In the meantime one possible workaround involves creating your own <input type="file"> and then submitting it to Fine Uploader via the API once a user selects one or more files. For example:

<input type="file" name="extraButton">
<script>
document.querySelector('input[name="extraButton"]').addEventListener('change', function(event) {
   uploader.addFiles(event.target);
});
</script>

Upvotes: 3

Related Questions