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.

I haven't done a fiddle before. I'll post the link when I'm done. — freeloader
– freeloader, Commented Aug 2, 2014 at 9:00
hi, sorry for the late reply. i had other things to finish. here's the link for jsfiddle. jsfiddle.net/ladybug88/y5RG4 — freeloader
– freeloader, Commented Aug 4, 2014 at 2:24
Please explain more about this part: 1.ability to add the same image after they removed it. 2. reset the Input file if there's ever one, that would not affect all the other selected files. Note: In your fiddle, removing and adding the same file name works fine.. — Bla...
– Bla..., Commented Aug 4, 2014 at 12:03
hi. try adding only one image. then remove it. then try to add it again. that's where the problem is. if you try to add a different image, then add the very first one again, it will work, but again, adding file should be automatic. — freeloader
– freeloader, Commented Aug 5, 2014 at 3:18

Oleg Sevruk · Accepted Answer · 2017-09-26 18:34:54Z

0

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

answered Sep 26, 2017 at 18:34

Oleg Sevruk

1,0599 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related