How to delete one image from the array $_FILES using previews - Javascript / PHP

Question

I want to create a multiple image uploader inside a form with preview and delete options. I am using php as part of my backend.

The part of the preview is easy. I've followed the explanation in

Image Upload with preview and Delete option - Javascript / Jquery

My problem comes when I want to delete an image. It is deleted from the preview but not from the e.target.files array, so when I access the variable $_FILES in php, I obtain all the images, including the ones removed.

As you can see in the picture, if I remove two images from the initial 5, there is still a message that says that I have 5 files.

I would like to know how can I remove those images completely, so in php I only access the images that have not been removed.

Thanks.

Answer 1

Form

<form id="myForm" method="post">

Files: <input type="file" id="files" name="files" multiple><br/>

<div id="selectedFiles"></div>

<input type="submit">
</form>

AJAX

 var selDiv = "";
        var storedFiles = [];

        $(document).ready(function() {
            $("#files").on("change", handleFileSelect);

            selDiv = $("#selectedFiles"); 
            $("#myForm").on("submit", handleForm);

            $("body").on("click", ".selFile", removeFile);
        });

        function handleFileSelect(e) {
            var files = e.target.files;
            var filesArr = Array.prototype.slice.call(files);
            filesArr.forEach(function(f) {          

                if(!f.type.match("image.*")) {
                    return;
                }
                storedFiles.push(f);

                var reader = new FileReader();
                reader.onload = function (e) {
                    var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
                    selDiv.append(html);

                }
                reader.readAsDataURL(f); 
            });

        }

        function handleForm(e) {
            e.preventDefault();
            var formdata = new FormData();

            for(var i=0, len=storedFiles.length; i<len; i++) {
                formdata.append('files[]', storedFiles[i]); 
            }

            $.ajax({
                    url: "tab.php",
                    type: 'POST',
                    data: formdata,
                    dataType: "json",
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(data) {
                        return true;
                    }
                });
        }

        function removeFile(e) {
            var file = $(this).data("file");
            for(var i=0;i<storedFiles.length;i++) {
                if(storedFiles[i].name === file) {
                    storedFiles.splice(i,1);
                    break;
                }
            }
            $(this).parent().remove();
        }