Multiple sectioned file upload with remove file from upload queue

A page where you can upload files in different sections Ability to remove files from upload queue before sending

by Suryar Praveen

HTML

<div class="container">
  <form id="fileupload" action="#" method="POST" enctype="multipart/form-data">

    <div class="row files" id="files1">

      <span class="btn btn-default btn-file">
                    Browse  <input type="file" name="files1" multiple />
                </span>
      <br />
      <ul class="fileList"></ul>
    </div>

  </form>
</div>

CSS

body {
  padding: 20px;
}

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

JavaScript

$.fn.fileUploader = function() {
  var fileIdCounter = 0;

  this.closest(".files").change(function(evt) {
    var output = [];

    for (var i = 0; i < evt.target.files.length; i++) {
      
      var file = evt.target.files[i];
      var fileId = fileIdCounter;


      var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + fileId + "\">Remove</a>";

      output.push("<li><strong>", escape(file.name), "</strong> - ", file.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> ");
    }

    $(this).children(".fileList").append(output.join(""));

    //reset the input to null - nice little chrome bug!
    evt.target.value = null;
  });

  $(this).on("click", ".removeFile", function(e) {
    e.preventDefault();
    var fileId = $(this).parent().children("a").data("fileid");


    $(this).parent().remove();
  });


  return this;
};


(function() {
  var filesToUpload = [];

  var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");


})()