How to Remove Single Uploaded File from Jquery in Multiple File Upload

var dropZoneId = "drop-zone";  var buttonId = "clickHere";  var mouseOverClass = "mouse-over";var dropZone = $("#" + dropZoneId); var inputFile = dropZone.find("input"); var finalFiles = {};$(function() {  
    var ooleft = dropZone.offset().left;  var ooright = dropZone.outerWidth() + ooleft;  var ootop = dropZone.offset().top;  var oobottom = dropZone.outerHeight() + ootop;   document.getElementById(dropZoneId).addEventListener("dragover", function(e) {    e.preventDefault();    e.stopPropagation();    dropZone.addClass(mouseOverClass);    var x = e.pageX;    var y = e.pageY;
    if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {      inputFile.offset({        top: y - 15,        left: x - 100      });    } else {      inputFile.offset({        top: -400,        left: -400      });    }
  }, true);
  if (buttonId != "") {    var clickZone = $("#" + buttonId);
    var oleft = clickZone.offset().left;    var oright = clickZone.outerWidth() + oleft;    var otop = clickZone.offset().top;    var obottom = clickZone.outerHeight() + otop;
    $("#" + buttonId).mousemove(function(e) {      var x = e.pageX;      var y = e.pageY;      if (!(x < oleft || x > oright || y < otop || y > obottom)) {        inputFile.offset({          top: y - 15,          left: x - 160        });      } else {        inputFile.offset({          top: -400,          left: -400        });      }    });  }
  document.getElementById(dropZoneId).addEventListener("drop", function(e) {    $("#" + dropZoneId).removeClass(mouseOverClass);  }, true);

  inputFile.on('change', function(e) {    finalFiles = {};    $('#filename').html("");    var fileNum = this.files.length,      initial = 0,      counter = 0;
    $.each(this.files,function(idx,elm){       finalFiles[idx]=elm;    });
    for (initial; initial < fileNum; initial++) {      counter = counter + 1;      $('#filename').append('<div id="file_'+ initial +'"><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + '  <span class="fa fa-times-circle fa-lg closeBtn" onclick="removeLine(this)" title="remove"></span></div>');    }  });


})
function removeLine(obj){  inputFile.val('');  var jqObj = $(obj);  var container = jqObj.closest('div');  var index = container.attr("id").split('_')[1];  container.remove(); 
  delete finalFiles[index];  //console.log(finalFiles);}

#drop-zone {  width: 100%;  min-height: 150px;  border: 3px dashed rgba(0, 0, 0, .3);  border-radius: 5px;  font-family: Arial;  text-align: center;  position: relative;  font-size: 20px;  color: #7E7E7E;}#drop-zone input {  position: absolute;  cursor: pointer;  left: 0px;  top: 0px;  opacity: 0;}/*Important*/
#drop-zone.mouse-over {  border: 3px dashed rgba(0, 0, 0, .3);  color: #7E7E7E;}/*If you dont want the button*/
#clickHere {  display: inline-block;  cursor: pointer;  color: white;  font-size: 17px;  width: 150px;  border-radius: 4px;  background-color: #4679BD;  padding: 10px;}#clickHere:hover {  background-color: #376199;}#filename {  margin-top: 10px;  margin-bottom: 10px;  font-size: 14px;  line-height: 1.5em;}.file-preview {  background: #ccc;  border: 5px solid #fff;  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);  display: inline-block;  width: 60px;  height: 60px;  text-align: center;  font-size: 14px;  margin-top: 5px;}.closeBtn:hover {  color: red;  display:inline-block;}}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><div id="drop-zone">  <p>Drop files here...</p>  <div id="clickHere">or click here.. <i class="fa fa-upload"></i>    <input type="file" name="file" id="file" multiple />  </div>  <div id='filename'></div></div>

how to remove a file from file upload control before uploading it using jQuery

From your code, I can see that you forget to remove the dom that why the file still exists.

Another, to make the code simple we can attach data-index inside the delete button to remember the file index when we're deleting it will be easy than compare the string of filename.

Here is the modified code.

var fileInput = document.getElementById('inputfile');
var fileListDisplay = document.getElementById('allfiles');

var fileList = [];
var renderFileList, sendFile;

fileInput.addEventListener('change', function (evnt) {
  fileList = [];
  for (var i = 0; i < fileInput.files.length; i++) {
    fileList.push(fileInput.files[i]);
  }
  renderFileList();
});

renderFileList = function () {
  fileListDisplay.innerHTML = '';
  fileList.forEach(function (file, index) {
    var fileDisplayEl = document.createElement('p');
    fileDisplayEl.innerHTML = `${file.name} <button data-index="${index}" class='deletfile'>X</button>`;
    fileListDisplay.appendChild(fileDisplayEl);
  });
};


$(document).on('click','.deletfile', function()
{
  const index= $(this).attr('data-index');
  fileList.splice(parseInt(index, 10), 1);
  $(this).parent().remove();
});

Multiple file upload - with 'remove file' link

As in this JSFiddle, I've added a class name .removeFile to the dynamically generated remove link; then use this class as a selector to pick up the one which is clicked and remove the parent li.

Updated:

JS:

// add .removeFile class to the li's element to pick them by this selector
var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + i + "\">Remove</a>";

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

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

var filesToUpload = [];

$(document).on("click",".removeFile", function(e){
    e.preventDefault();
    var fileName = $(this).parent().children("strong").text();

     // loop through the files array and check if the name of that file matches FileName
    // and get the index of the match
    for(i = 0; i < filesToUpload.length; ++ i){
        if(filesToUpload[i].name == fileName){
            //console.log("match at: " + i);
            // remove the one element at the index where we get a match
            filesToUpload.splice(i, 1);
        }   
    }

    //console.log(filesToUpload);
    // remove the <li> element of the removed file from the page DOM
    $(this).parent().remove();
});

You can un-comment the console.log() statements to see the result

---

Related Topics