0

I have a file upload option on a form I have built with .NET MVC.

I have the following JavaScript that lists out the selected files in my fileList div.

enter image description here

        updateList = function () {
        var input = document.getElementById('file');
        var output = document.getElementById('fileList');

        output.innerHTML = '<ul>';
        for (var i = 0; i < input.files.length; ++i) {
            output.innerHTML += '<li>' + input.files.item(i).name + '<a onclick="removeFile()" href="javascript:void(0);">remove</a>' + '</li>';
        }
        output.innerHTML += '</ul>';
    }

Next to each file I am printing the 'remove' text that will call a function named removeFile.

From here I am stuck, how would I remove the specific file from my list? Any help would be appreciated!

1 Answers1

0

I guess, you want to remove the tags: change this line (a this is added to removeFile):

output.innerHTML += '<li>' + input.files.item(i).name + '<a onclick="removeFile(this)" href="javascript:void(0);">remove</a>' + '</li>';

then define removeFile:

removeFile = function(file) {
    file.parentNode.parentNode.removeChild(file.parentNode);
}

if you also want to remove the entry from the list, you have to define your own array, cause FileList object is readonly: How do I remove a file from the FileList

  • The above removeFile function removes the link after the file name, but does not remove the actual file name. –  Dec 15 '17 at 18:28