0

I've got an issue with my uploads, I'm using FileReader with readAsDataURL() method, when user select its images then he can preview files. Also I have a button which has classname "del-first", when user click on it first image should be deleted from preview and also from input value. That's my problem.

So I have an input:

<form method="post" enctype="multipart/form-data">
    <input type="file" id="myFiles" name="myFiles[]" accept="image/png, image/jpeg" multiple />
    <div class="preview-wrapper">
        <button class="del-first"></button>
    </div>
    <input type="submit" value="SUBMIT" />
</form>

My Javscript:

const fileInput = document.getElementById("myFiles");

function previewFiles() {

  var preview = document.querySelector('.preview-wrapper');
  var files   = fileInput.files;

  function readAndPreview(file) {

    // Make sure `file.name` matches our extensions criteria
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function() {
        var conta = document.createElement('div');
        conta.className = "preview-image";

        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;

        conta.appendChild( image );
        preview.appendChild( conta );
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

  var newFileList = Array.from(event.target.files);
  console.log(newFileList);

  var imgRemove = document.querySelector('.del-first');

  imgRemove.addEventListener("click", function(e) {
    e.preventDefault();
    newFileList.splice(0,1);
    console.log(newFileList);
  })

}

fileInput.addEventListener("change", previewFiles);

As you can see in the end of the script I used array.from for my files:

var newFileList = Array.from(event.target.files);

then I added listener, when user click button first object should be deleted:

var imgRemove = document.querySelector('.del-first');
        
imgRemove.addEventListener("click", function(e) {
   e.preventDefault();
   newFileList.splice(0,1);
   console.log(newFileList);
})

So in my console.log I'm getting that it has been deleted, but now I need somehow push my newFileList to my input, so when user click submit I get on my server valid files. But I don't know how to make it?

AkForDev
  • 359
  • 3
  • 15
  • The `.files` property on the `` element is read-only. Only the browser user can set the list of files. – Pointy Jul 27 '20 at 17:34
  • Does this answer your question? [How to remove one specific selected file from input file control](https://stackoverflow.com/questions/19060378/how-to-remove-one-specific-selected-file-from-input-file-control) – Heretic Monkey Jul 27 '20 at 17:54
  • @HereticMonkey Unfortunately, no. – AkForDev Jul 27 '20 at 18:03
  • Please [edit] your question to show how you've applied the answers to that question to your situation and found them lacking. The questions are almost identical in what they are asking. – Heretic Monkey Jul 27 '20 at 18:07
  • @HereticMonkey That solution only works if you're NOT uploading the files from Form Submit, that's for sure. Then the answer isn't correct, he used foreach not correct, because files are objects. His code isn't good, you should understand this. It doesn't solve what I'm asking for. – AkForDev Jul 27 '20 at 18:14
  • There is another answer to the question. One that does not require using ajax to upload the data. The accepted answer is only the answer that helped one person the most. – Heretic Monkey Jul 27 '20 at 18:19
  • @HereticMonkey Second one is using base64 is the hardest way to get simple image to your server, you should write new logic on your server side to filter and decode files that you get. – AkForDev Jul 27 '20 at 18:36

1 Answers1

0

According to my understanding, I don't think you could remove the file from your file list. The file's data in files is read-only, so I recommend you use multiple <input type="file"> for adding file instead of <input type="file" multiple>, so that you can easily remove the specific file with the simple remove button (clear the value of the file input). It may be inconvenient for the user, but it works in your case I think.

========Update

Instead of using <input type="file" multiple>. You can use the alternative way like this. You can take a look of this

Hope it would help. Please correct me if I were wrong

Thien Huynh
  • 559
  • 5
  • 13