blueimp jQuery File Upload Multiple Instance

Question

I am trying to implement blueimp ajaxfile uploader in ASP.Net website

Blueimp JQuery File Upload

I was able to implement the uploader successfully apart from customizing some css due to space constraint.

Now my actual requirement is to implement multiple instances of this control on this same asp.net page.

If some one had tried to implement multiple instance of Blueimp JQuery File Upload for ASP.Net on same page please help me on this issue.

Below is main portion of code I am using to add the control in the page

<div id="fileupload">
<form action="Handler.ashx" method="post" enctype="multipart/form-data">
<div class="fileupload-buttonbar">
    <label class="fileinput-button">
        <span>Add files...</span>
        <input id="file" type="file" name="files[]" multiple />
        <input id="hdnFundID" name="hdnFundID" value="1236" type="hidden" />
    </label>
    <button type="submit" class="start">
        Start upload</button>
    <button type="reset" class="cancel">
        Cancel upload</button>
    <button type="button" class="delete">
        Delete files</button>
</div>
</form>
<div class="fileupload-content">
    <table class="files">
    </table>
    <div class="fileupload-progressbar">
    </div>
</div>

<script id="template-upload" type="text/x-jquery-tmpl">
<tr class="template-upload{{if error}} ui-state-error{{/if}}">
    <td class="preview"></td>
    <td class="name">${name}</td>
    <td class="size">${sizef}</td>
    {{if error}}
        <td class="error" colspan="2">Error:
            {{if error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else}}${error}
            {{/if}}
        </td>
    {{else}}
        <td class="progress"><div></div></td>
        <td class="start"><button>Start</button></td>
    {{/if}}
    <td class="cancel"><button>Cancel</button></td>
</tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
<tr class="template-download{{if error}} ui-state-error{{/if}}">
    {{if error}}
        <td></td>
        <td class="name">${namefdsa}</td>
        <td class="size">${sizef}</td>
        <td class="error" colspan="2">Error:
            {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
            {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
            {{else error === 3}}File was only partially uploaded
            {{else error === 4}}No File was uploaded
            {{else error === 5}}Missing a temporary folder
            {{else error === 6}}Failed to write file to disk
            {{else error === 7}}File upload stopped by extension
            {{else error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
            {{else error === 'emptyResult'}}Empty file upload result
            {{else}}${error}
            {{/if}}
        </td>
    {{else}}
        <td class="preview">
            {{if Thumbnail_url}}
                <a href="${url}" target="_blank"><img src="${Thumbnail_url}"></a>
            {{/if}}
        </td>
        <td class="name">
            <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${Name}</a>
        </td>
        <td class="size">${Length}</td>
        <td colspan="2"></td>
    {{/if}}
    <td class="delete">
        <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
    </td>
</tr>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="example/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="example/jquery.fileupload.js" type="text/javascript"></script>
<script src="example/jquery.fileupload-ui.js" type="text/javascript"></script>
<script src="example/application.js" type="text/javascript"></script>

application.js (pasted from author's comment)

$(function () 
{ 
  'use strict'; 
  // Initialize the jQuery File Upload widget: 
  $('#fileupload').fileupload({ }); 
  $('#fileupload').bind('fileuploaddone', function (e, data) { ...... }); 
  // Open download dialogs via iframes, 
  // to prevent aborting current uploads: 
  $('#fileupload .files a:not([target^=_blank])').live('click', function (e) 
  { 
    e.preventDefault(); ....... 
  }); 
});

Please provide your suggestions.

Answer 1

This was answered by blueimp himself. Have a look here: https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page

So, you need a form for each upload and separate templates which you can pass references on initialization.

1 give each form the same class, e.g. 'fileupload'

2 initialize them all with

$('.fileupload').each(function () {
  $(this).fileupload({
      dropZone: $(this)
  })
  .bind('fileuploaddone', function(){})
  .bind('fileuploadfail', function(){})
});

3 individual templates can be passed on the forms as attributes.

<form ...
  data-upload-template-id="template-upload-1"
  data-download-template-id="template-download-1">
</form>

Answer 2

This is what worked for me:

Create 1 instance with id 'fileupload' (this is the input element's id). The second instance should be with a different id (e.g. fileupload2). also change the div's "progress" id of the second instance (e.g. progress2) everything else could be identical between 2 instances. use the api on fileupload (first instance) as you usually did (e.g. $('#fileupload').fileupload({ url: url, dataType: 'json', done: ........});

Then bind the change of the SECOND instance to the first instance (selected files will actually be uploaded through the FIRST instance). You can do it like this:

$('#fileupload2').bind('change', function (e) {
$('#fileupload').fileupload('add', {files: $('#fileupload2')[0].files })                                                                                                             });