JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="file" accept="image/*" multiple></input>
<p>Gallery</p>
<div class="gallery"></div>
<div class="thumb" style='display:none'>
    <img src="" alt="">
    <button>Remove</button>
</div>
    <p>Clicking this button will load all the files that have been selected so far and are in the list</p>
    <button id='clean'>CleanList</button>

CSS

.gallery {
    background-color: gray; width: 400px; min-height: 100px; text-align: center; padding: 15px;
}
.thumb {
    padding: 10px; width: 100px; border:1px solid; margin: 5px;
}
.thumb img {
    width: 100px;
}

JavaScript

var files=[];
//once refered,  files are not lost after rechossing files..
$('#file').change(function(v){
     $.each(v.target.files,function(n,i){
        var reader = new FileReader(); //need to create new ones...they get busy..
        reader.readAsDataURL(i);
        reader.onload = (function(i) {
            return function(x) {
                files.push({file:i,data:x.target.result});
                updateList(files.length-1);
            }
        })(i);
     });
});

var thumb= $('.thumb').clone().show(), gallery= $('.gallery');

function updateList(n) {
    var e = thumb.clone();
    e.find('img').attr('src',files[n].data);
    e.find('button').click(removeFromList).data('n',n);
    gallery.append(e);

    function removeFromList() {
        files[$(this).data('n')] = null;
        $(this).parent().remove();
    }    
}

//Get clean Array full of files.: no removed files..nullss...

function getClean() { 
    var arr=[];
    $.each(files,function(n,i) { 
        if ( i !== null ) arr.push(i.file);
    });
    return arr;
}
$('#clean').click(function(){console.log(getClean());});