Multiple file upload - with 'remove file' link

Question

I'm trying to create a form where I can have multiple file upload sections, where the user can upload multiple files.

That part, is reasonably straight forward. My problem comes from allowing the user to 'remove' a file from the upload list, before it's uploaded.

I've created a fiddle to illustrate
http://jsfiddle.net/alexjamesbrown/o62srbew/

I've got a simple row, that holds the <input type="file"

<div class="row files" id="files1"> <h2>Files 1</h2> <span class="btn btn-default btn-file"> Browse <input type="file" name="files1" multiple /> </span> <br /> <ul class="fileList"></ul> </div>

then, so far, I've created a jquery plugin so it's re-usable:

$.fn.fileUploader = function (filesToUpload) { this.closest(".files").change(function (evt) { for (var i = 0; i < evt.target.files.length; i++) { filesToUpload.push(evt.target.files[i]); }; var output = []; for (var i = 0, f; f = evt.target.files[i]; i++) { var removeLink = "<a href=\"#\" data-fileid=\"" + i + "\">Remove</a>"; output.push("<li><strong>", escape(f.name), "</strong> - ", f.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> "); } $(this).children(".fileList") .append(output.join("")); }); };

I'm then initialising my very basic plugin like this:

var filesToUpload = []; $("#files1").fileUploader(filesToUpload); $("#files2").fileUploader(filesToUpload); $("#uploadBtn").click(function (e) { e.preventDefault(); });

Possible duplicate of How to remove one specific selected file from input file control — Ryan Wheale
– Ryan Wheale, Commented Oct 29, 2015 at 17:02

Mi-Creativity · Accepted Answer · 2015-10-29 16:55:39Z

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. &nbsp; &nbsp; ", 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

this removes the <li> tag but doesn't actually do anything to the underlying input field - the file is still here, and is still uploaded....
@Alex, sorry man I thought the problem was with picking the one that should be removed I apologize, I've updated the code now and it is works well, please check it and hopefully this will work for you
Thank you! Your solution helped me implement a user-required feature.

Collectives™ on Stack Overflow

Multiple file upload - with 'remove file' link

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related