javascript FileReader get name?
<p>I'm working on a simple script for my site to upload images. I have a multiple file input <code>&lt;input type = 'file' name = 'files[]' id = 'hiddenFile' multiple&gt;</code> that is being triggered by a div click. When I queue the files, I want to be able to delete one. I know I can loop through the <code>$('#hiddenFile').val()</code> and splice to get the name out but I'm having an issue with figuring out the file name. When I assign the file to a new img container, how do I get the name? I've tried <code>console.log(f.name)</code> and a few variations but it returns an undefined error. Here are my scripts. I think I'm pretty close but this is something I'm learning as I go. Thanks!</p>

<pre><code>function readURL(input) {
var files = $('#hiddenFile')[0].files; //where files would be the id of your multi file input
//or use document.getElementById('files').files;

    for (var i = 0, f; f = files[i]; i++) {

        var reader = new FileReader();

        reader.onload = function (e) {
            console.log(f.name); //how can I get the 
                                 //file name here to add it to the image as an attribute?
            $("&lt;img src = '"+e.target.result+"' class = 'addedImg'&gt;").appendTo("#imgBox");
        };

        reader.readAsDataURL(f);

    }
}

$(document).ready(function(){
    $(document).on('click', '#addBtn', function(e){
        e.preventDefault();
        $('#hiddenFile').click();
    });
});
</code></pre>

<p><a href="https://i.stack.imgur.com/AD06b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AD06b.png" alt="enter image description here"></a></p>