Multiple File Upload with jQuery [removing file then adding it again]

Question

I know that this problem had been asked before but I'm having a problem with Multiple File Upload. I don't want to use a plugin for this. I want to upload multiple files, save it to database and store them to a folder. Before uploading the images, I want to display the names of all the images in list-style. I have a remove button that is being added dynamically when you select a file.

$("#imagefile").on("change", function() {
  var filename = v.name;
  var newfilenameshufflen = $("#"+newfilenameshuff).length;
  if(newfilenameshufflen == 0 || newfilenameshufflen == "0") {
    $('.list-group').append("<li class='list-group-item' id='"+newfilenameshuff+"'><span class='span_image_title'>"+filename+"</span><span class='imagefilesize' id='"+imagefilesizeID+"'></span><span class='removeFile btn btn-primary'>Remove</span></li>");
  }
});

Removing the element is working. Uploading the images to the database is working as expected too. But before uploading all the files, I want to give the user the ability to add the same image after they removed it, but that does not work as expected. you cannot add the same image with the same file name unless you add a different file name on top of it.

$(document).on("click", ".removeFile", function(e) {
    //clone the element and its children and remove the original
    var parentID = $(this).parent().attr('id');
    var parentEl = $("#"+parentID);
    parentEl.remove();
});

I want to be able to select the same file automatically. How do I reset the Input file if there's ever one, that would not affect all the other selected files? I have been stuck with this problem for a day now. Please, I don't want to use any plugins for this. Thanks.

Answer 1

Try this:

$(document).on("click", ".removeFile", function(e) {
    //clone the element and its children and remove the original
    var parentID = $(this).parent().attr('id');
    var parentEl = $("#"+parentID);
    parentEl.remove();
    $("#imagefile").val('');
});

You need to change input[type="file"] value to empty