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.

Vaibhavi S. · Accepted Answer · 2019-10-11 05:16:39Z

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();
        }

edited Oct 11, 2019 at 5:16

answered Oct 1, 2019 at 10:37

Vaibhavi S.

1,0938 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

RJ-mac Over a year ago

How can I obtain the id of the removed image given an input like this? <input type="file" id="files" name="img[]" multiple required/>

Vaibhavi S. Over a year ago

@RJ-mac No, When upload image append data-id into preview div remove button like <button class="remove" data-id="0">Remove</button>

RJ-mac Over a year ago

Ok, but where do I have to put your delete code? Inside the remove click function done in stackoverflow.com/questions/37205438/…?

Vaibhavi S. Over a year ago

@RJ-mac data-idAdd here dynamically like 0,1,2.. <span class=\"remove\" data-id="0">Remove image</span>

Vaibhavi S. Over a year ago

@RJ-mac Please See Edited Answer.

|

Collectives™ on Stack Overflow

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

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related