title: blueimp jQuery File Upload Multiple Instance
body: <p>I am trying to implement blueimp ajaxfile uploader in ASP.Net website</p>
  
  <p><a href="https://github.com/blueimp/jQuery-File-Upload" rel="nofollow">Blueimp JQuery File Upload</a></p>
  
  <p>I was able to implement the uploader successfully apart from customizing some css due to space constraint.</p>
  
  <p>Now my actual requirement is to implement multiple instances of this control on this same asp.net page. </p>
  
  <p>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.</p>
  
  <p>Below is main portion of code I am using to add the control in the page </p>
  
  <pre><code>&lt;div id="fileupload"&gt;
  &lt;form action="Handler.ashx" method="post" enctype="multipart/form-data"&gt;
  &lt;div class="fileupload-buttonbar"&gt;
      &lt;label class="fileinput-button"&gt;
          &lt;span&gt;Add files...&lt;/span&gt;
          &lt;input id="file" type="file" name="files[]" multiple /&gt;
          &lt;input id="hdnFundID" name="hdnFundID" value="1236" type="hidden" /&gt;
      &lt;/label&gt;
      &lt;button type="submit" class="start"&gt;
          Start upload&lt;/button&gt;
      &lt;button type="reset" class="cancel"&gt;
          Cancel upload&lt;/button&gt;
      &lt;button type="button" class="delete"&gt;
          Delete files&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;div class="fileupload-content"&gt;
      &lt;table class="files"&gt;
      &lt;/table&gt;
      &lt;div class="fileupload-progressbar"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script id="template-upload" type="text/x-jquery-tmpl"&gt;
  &lt;tr class="template-upload{{if error}} ui-state-error{{/if}}"&gt;
      &lt;td class="preview"&gt;&lt;/td&gt;
      &lt;td class="name"&gt;${name}&lt;/td&gt;
      &lt;td class="size"&gt;${sizef}&lt;/td&gt;
      {{if error}}
          &lt;td class="error" colspan="2"&gt;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}}
          &lt;/td&gt;
      {{else}}
          &lt;td class="progress"&gt;&lt;div&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;td class="start"&gt;&lt;button&gt;Start&lt;/button&gt;&lt;/td&gt;
      {{/if}}
      &lt;td class="cancel"&gt;&lt;button&gt;Cancel&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/script&gt;
  &lt;script id="template-download" type="text/x-jquery-tmpl"&gt;
  &lt;tr class="template-download{{if error}} ui-state-error{{/if}}"&gt;
      {{if error}}
          &lt;td&gt;&lt;/td&gt;
          &lt;td class="name"&gt;${namefdsa}&lt;/td&gt;
          &lt;td class="size"&gt;${sizef}&lt;/td&gt;
          &lt;td class="error" colspan="2"&gt;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}}
          &lt;/td&gt;
      {{else}}
          &lt;td class="preview"&gt;
              {{if Thumbnail_url}}
                  &lt;a href="${url}" target="_blank"&gt;&lt;img src="${Thumbnail_url}"&gt;&lt;/a&gt;
              {{/if}}
          &lt;/td&gt;
          &lt;td class="name"&gt;
              &lt;a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}&gt;${Name}&lt;/a&gt;
          &lt;/td&gt;
          &lt;td class="size"&gt;${Length}&lt;/td&gt;
          &lt;td colspan="2"&gt;&lt;/td&gt;
      {{/if}}
      &lt;td class="delete"&gt;
          &lt;button data-type="${delete_type}" data-url="${delete_url}"&gt;Delete&lt;/button&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="example/jquery.iframe-transport.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="example/jquery.fileupload.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="example/jquery.fileupload-ui.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="example/application.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>application.js</strong> (pasted from author's comment)
  </p>
  
  <pre><code>$(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(); ....... 
    }); 
  });
  </code></pre>
  
  <p>Please provide your suggestions.</p>