Delete An Image() Object From Memory On Click Event Of Sibling Element — JavaScript

user_5219761 0
Viewed 566

I have an image previewer that uses the JavaScript Image() object to preview images prior to them being processed with PHP. I have a div that contains an 'x' SVG graphic that is targeted with a click event to delete the image.

In the code below at the bottom of the function it uses evt.target and essentially removes the parent element that each image is inside to delete the image if the user wishes to do so.

This all works OK on a visual level, but even if the images are deleted (and they are removed from the HTML), when the 'submit' element on the form is clicked to upload the images, any deleted images are still processed. From what I can gather the images are stored in memory and are processed from there.

I've tried setting the image itself (the thumbnailElement in the JavaScript) to null and setting its src attribute to an empty string but this isn't working.

What is the best way to prevent these deleted image previews from being processed?

In the code below I've swapped out the SVG graphic for the 'x' to the letter 'x' to make it easier to read.

NOTE: I've showed the entire image uploader below - but it is the final part of the JS underneath // Delete Images that is part I need help with.

Codepen: https://codepen.io/emilychews/pen/WNjZVGZ

const dropZone = document.getElementById('drop-zone'),
    showSelectedImages = document.getElementById('show-selected-images'),
    fileUploader = document.getElementById('standard-upload-files')  

dropZone.addEventListener("click", (evt) => {
    // assigns the dropzone to the hidden input element so when you click 'select files' it brings up a file picker window
    fileUploader.click();
});

// Prevent browser default when draging over
dropZone.addEventListener("dragover", (evt) => {
    evt.preventDefault();
});

fileUploader.addEventListener("change", (evt) => {
    // Clear the already selected images
    showSelectedImages.innerHTML = "";
    // this function is further down but declared here and shows a thumbnail of the image
    [...fileUploader.files].forEach(updateThumbnail);
});

dropZone.addEventListener("drop", (evt) => {
    evt.preventDefault();
    // Clear the already selected images
    showSelectedImages.innerHTML = "";

    // assign dropped files to the hidden input element
    if (evt.dataTransfer.files.length) {
        fileUploader.files = evt.dataTransfer.files;
    }

    // function is declared here but written further down
    [...evt.dataTransfer.files].forEach(updateThumbnail);


});

// updateThumbnail function that needs to be able to handle multiple files
function updateThumbnail(file) {
    
    if (file.type.startsWith("image/")) {

        const uploadImageWrapper = document.createElement('article'),
        removeImage = document.createElement('div'),
        thumbnailElement = new Image();

        // 'x' that deletes the image
        removeImage.classList.add("remove-image");
        removeImage.innerHTML = 'x';

        // image thumbnail
        thumbnailElement.classList.add("drop-zone__thumb");
        thumbnailElement.src = URL.createObjectURL(file);

        // appending elements
        showSelectedImages.append(uploadImageWrapper)   // <article> element
        uploadImageWrapper.append(removeImage)          // 'x' to delete
        uploadImageWrapper.append(thumbnailElement);    // image thumbnail
        
        // Delete images

        removeImage.addEventListener('click', (evt) => {
            if(evt.target) {
                var deleteImage = removeImage.closest('article');
                deleteImage.remove()
            }
        })
    }

} // end of 'updateThumbnail' function
body {
  margin: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

form {
  width: 30%;
}

#drop-zone {
  border: 1px dashed;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
}

.select-files {
  text-decoration: underline;
  cursor: pointer;
}

/* image that is preview prior to form submit*/
.drop-zone__thumb {
  width: 200px;
  height: auto;
  display: block;
}

#remove-x {
  width: 1rem;
  height: 1rem;
}

#submit-images {
  margin: 1rem 0;
}

#show-selected-images {
  display: flex;
}
<form id="upload-images-form" enctype="multipart/form-data" method="post">
  <h1>Upload Your Images</h1>
  <div id="drop-zone" class="drop-zone flex">
    <p class="td text-center">DRAG AND DROP IMAGES HERE</p>
    <p class="td text-center" style="margin: 0">Or</p>
    <p class="tl text-center select-files text-bold pointer">Select Files</p>
  </div>
  <input id="standard-upload-files" style="display:none" style="min-width: 100%" type="file" name="standard-upload-files[]" multiple>
  <input type="submit" name="submit-images" id="submit-images" value="SUBMIT IMAGES">
  <div id="show-selected-images"></div>
</form>

memory events image javascript
2 Answers

Problem:

You are not updating fileUploader.files when you add/remove an item.

Solution

Every time you drop/remove a file you need to update the fileUploader input. The first step is to create a function to handle the FileList object and change only two lines of your code:

//--> to create a FileList
function getFileListItems (files) {
  var transferObject = new ClipboardEvent("").clipboardData || new DataTransfer()
  for (var i = 0; i<files.length; i++) transferObject.items.add(files[i])
  return transferObject.files;
}

Add files during the drop event:

 //--> Updating files during drop event
 fileUploader.files = getFileListItems([...fileUploader.files, ...evt.dataTransfer.files]);

Removing a file:

fileUploader.files = getFileListItems([...fileUploader.files].filter(f => file!==f));

See a complete working example:

const dropZone = document.getElementById("drop-zone"),
  showSelectedImages = document.getElementById("show-selected-images"),
  fileUploader = document.getElementById("standard-upload-files");

dropZone.addEventListener("click", (evt) => {
  // assigns the dropzone to the hidden input element so when you click 'select files' it brings up a file picker window
  fileUploader.click();
});

// Prevent browser default when draging over
dropZone.addEventListener("dragover", (evt) => {
  evt.preventDefault();
});

fileUploader.addEventListener("change", (evt) => {
  // this function is further down but declared here and shows a thumbnail of the image
  [...fileUploader.files].forEach(updateThumbnail);
});

function getFileListItems(files) {
  var transferObject = new ClipboardEvent("").clipboardData || new DataTransfer()
  for (var i = 0; i < files.length; i++) transferObject.items.add(files[i])
  return transferObject.files;
}

dropZone.addEventListener("drop", (evt) => {
  evt.preventDefault();
  // assign dropped files to the hidden input element
  if (evt.dataTransfer.files.length) {
    fileUploader.files = getFileListItems([...fileUploader.files, ...evt.dataTransfer.files]);
  }
  // function is declared here but written further down
  [...evt.dataTransfer.files].forEach(updateThumbnail);
});

// updateThumbnail function that needs to be able to handle multiple files
function updateThumbnail(file) {
  if (file.type.startsWith("image/")) {
    let uploadImageWrapper = document.createElement("article"),
      removeImage = document.createElement("div"),
      thumbnailElement = new Image();

    // 'x' that deletes the image
    removeImage.classList.add("remove-image");
    removeImage.innerHTML =
      '<svg id="remove-x" viewBox="0 0 150 150"><path fill="#000" d="M147.23,133.89a9.43,9.43,0,1,1-13.33,13.34L75,88.34,16.1,147.23A9.43,9.43,0,1,1,2.76,133.89L61.66,75,2.76,16.09A9.43,9.43,0,0,1,16.1,2.77L75,61.66,133.9,2.77a9.42,9.42,0,1,1,13.33,13.32L88.33,75Z"/></svg>';

    // image thumbnail
    thumbnailElement.classList.add("drop-zone__thumb");
    thumbnailElement.src = URL.createObjectURL(file);

    // appending elements
    showSelectedImages.append(uploadImageWrapper); // <article> element
    uploadImageWrapper.append(removeImage); // 'x' to delete
    uploadImageWrapper.append(thumbnailElement); // image thumbnail

    // Delete images
    removeImage.addEventListener("click", (evt) => {
      if (evt.target) {
        var deleteImage = removeImage.parentElement;
        deleteImage.remove();
        fileUploader.files = getFileListItems([...fileUploader.files].filter(f => file !== f));
      }
    });
  }
} // end of 'updateThumbnail' function
body {
  margin: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

form {
  width: 30%;
}

#drop-zone {
  border: 1px dashed;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
}

.select-files {
  text-decoration: underline;
  cursor: pointer;
}


/* image that is preview prior to form submit*/

.drop-zone__thumb {
  width: 200px;
  height: auto;
  display: block;
}

#remove-x {
  width: 1rem;
  height: 1rem;
}

#submit-images {
  margin: 1rem 0;
}

#show-selected-images {
  display: flex;
}
<form id="upload-images-form" enctype="multipart/form-data" method="post">
  <h1>Upload Your Images</h1>
  <div id="drop-zone" class="drop-zone flex">
    <p class="td text-center">DRAG AND DROP IMAGES HERE</p>
    <p class="td text-center" style="margin: 0">Or</p>
    <p class="tl text-center select-files text-bold pointer">Select Files</p>
  </div>
  <input id="standard-upload-files" style="display:none" style="min-width: 100%" type="file" name="standard-upload-files[]" multiple>
  <input type="submit" name="submit-images" id="submit-images" value="SUBMIT IMAGES">
  <div id="show-selected-images"></div>

</form>

Working example

user_143498080

This is because when a form submitted, it doesn't submit every HTML element in the form, but only values of input, textarea, pressed button and some others that have name attribute.

So what you need is clear the file input field too:

const showSelectedImages = document.getElementById("preview");
const input = document.getElementById("test");

function updateThumbnail(file) {
  if (file.type.startsWith("image/")) {

    // image and 'x' to delete wrapper 
    const uploadImageWrapper = document.createElement('article')

    // div that holds the 'x' to delete
    const removeImage = document.createElement('div')

    // image preview element
    thumbnailElement = new Image()

    // 'x' that deletes the image
    removeImage.classList.add("remove-image")
    removeImage.innerHTML = 'x'

    // image thumbnail
    thumbnailElement.classList.add("drop-zone__thumb")
    thumbnailElement.src = URL.createObjectURL(file)

    // appending elements
    showSelectedImages.append(uploadImageWrapper) // <article> element
    uploadImageWrapper.append(removeImage) // 'x' to delete
    uploadImageWrapper.append(thumbnailElement) // image thumbnail

    // Delete Images when the 'x' div is clicked
    removeImage.addEventListener('click', (evt) => {
      if (evt.target) {
        var deleteImage = removeImage.parentElement
        deleteImage.remove();

        /* for single file input is enough clear value property */

        //        input.value = null;

        /* for multiple files input we'll need recreate new files list excluding deleted file */
        const dt = new DataTransfer();
        for (let f of input.files) {
          if (f !== file)
            dt.items.add(f);
        }

        input.files = dt.files;
      }
    })
  }

}

function updateThumbnails(files) {
  showSelectedImages.innerHTML = ""; //remove all previous previews
  for (let f of files)
    updateThumbnail(f);
}

function showform(form) {
  const list = {};
  for (let i of [...new FormData(form).entries()]) {
    const key = i[0].match(/^([^\[]+)\[\]$/);
    if (key) {
      if (!list[key[1]])
        list[key[1]] = [];
      list[key[1]][list[key[1]].length] = i[1];
    } else
      list[i[0]] = i[1];
  }
  console.log(list)
  return false;
}
.remove-image {
  cursor: pointer;
}

article {
  display: inline-block;
}
<form type="post" onsubmit="return showform(this);">
  <input type="hidden" name="myHiddenInput" value="blah">
  <input type="file" name="test[]" id="test" oninput="updateThumbnails(this.files)" multiple>
  <span id="preview"></span>
  <button type="submit">submit</button>
</form>

user_29300380
Related