Question

I’m trying to implement the jQuery File Upload Widget on my website.

What I need to do is to create 2 unique widgets wich isn’t a problem because I can put Multiple File Upload Widgets on the same page. The only problem is that the templates are hard-coded in the widget. So, if I want to have multiple widgets, it seems, I would have to only have a template for one of them. This seems strange since there is support for multiple widgets. I must be missing something.

This is how I’ve initialized the widget:

$("#fileupload").fileupload({
    dataType:'json',
    url:'Uploader/server/php/index.php',
    autoUpload:true,
    maxFileSize:5000000,
    acceptFileTypes:/(\.|\/)(pdf|docx|doc|xlsx|xls|rtf|txt)$/i
});

This is how I’ve created the templates:

<script id="template-upload" type="text/html">
    {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
        <div class="uploaded">
        File Name: {%=file.name%}
        {% if (file.error) { %}
            <span class="upload-error">Error: {%=fileUploadErrors[file.error] || file.error%}</span>
        {% } else if (o.files.valid && !i) { %}
            <span class="progress"><div class="progressbar"><div style="width:0%;"></div></div></span>
        {% } %}
        </div>
        {% } %}
</script>
<script id="template-download" type="text/html">
    {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
        <div class="uploaded">
            File Name: {%=file.name%}
            <span class="delete">
                <button class="text-button remove" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">x</button>
            </span>
        </div>
    {% } %}
</script>

Answer 1

Since I was unable to figure out this problem I posted a an issue for it on GitHub (Issue #1057). That night the creator of the widget had the problem fixed and committed to the repository. Yay!

Here are the links to the solution:

Main Site: https://github.com/blueimp/jQuery-File-Upload
Solution: https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page