title: Multiple file upload - with 'remove file' link
body: <p>I'm trying to create a form where I can have multiple file upload sections, where the user can upload multiple files.</p>
  
  <p>That part, is reasonably straight forward. My problem comes from allowing the user to 'remove' a file from the upload list, before it's uploaded.</p>
  
  <p>I've created a fiddle to illustrate<br>
  <a href="http://jsfiddle.net/alexjamesbrown/o62srbew/" rel="nofollow">http://jsfiddle.net/alexjamesbrown/o62srbew/</a></p>
  
  <p>I've got a simple row, that holds the <code>&lt;input type="file"</code></p>
  
  <pre><code>&lt;div class="row files" id="files1"&gt;
      &lt;h2&gt;Files 1&lt;/h2&gt;
      &lt;span class="btn btn-default btn-file"&gt;
          Browse  &lt;input type="file" name="files1" multiple /&gt;
      &lt;/span&gt;
      &lt;br /&gt;
      &lt;ul class="fileList"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then, so far, I've created a jquery plugin so it's re-usable:</p>
  
  <pre><code>$.fn.fileUploader = function (filesToUpload) {
      this.closest(".files").change(function (evt) {
  
          for (var i = 0; i &lt; evt.target.files.length; i++) {
              filesToUpload.push(evt.target.files[i]);
          };
          var output = [];
  
          for (var i = 0, f; f = evt.target.files[i]; i++) {
              var removeLink = "&lt;a href=\"#\" data-fileid=\"" + i + "\"&gt;Remove&lt;/a&gt;";
  
              output.push("&lt;li&gt;&lt;strong&gt;", escape(f.name), "&lt;/strong&gt; - ",
                  f.size, " bytes. &amp;nbsp; &amp;nbsp; ", removeLink, "&lt;/li&gt; ");
          }
  
          $(this).children(".fileList")
              .append(output.join(""));
      });
  };
  </code></pre>
  
  <p>I'm then initialising my very basic plugin like this:</p>
  
  <pre><code>var filesToUpload = [];
  
  $("#files1").fileUploader(filesToUpload);
  $("#files2").fileUploader(filesToUpload);
  
  $("#uploadBtn").click(function (e) {
      e.preventDefault();
  });
  </code></pre>