File Upload | Remove Funtionality

by Suryar Praveen

HTML

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="hello.js"></script>
<style>
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;}
</style>
</head>
<body>
<div class="container">
<br />
<form id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="files" id="files1">
<span class="btn btn-default btn-file">
Browse  <input type="file" name="files1" />
</span>
<br />
<ul class="fileList"></ul>
</div>

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

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


</div>
</body>
</html>

JavaScript

$( document ).ready(function() {
    $.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");
  var files2Uploader = $("#files2").fileUploader(filesToUpload, "files2");
  var files3Uploader = $("#files3").fileUploader(filesToUpload, "files3");


})()
});