We Keep Coding

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

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>

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

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>

How to add a close button to base64 image preview?

In a form I'd like to let users to upload multiple images, one by one, and also let them to remove each image by clicking on a x button:
Here is my javascript/jQuery which adds the Base64 image previews to the DOM:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
let image = new Image();
image.src = `${e.target.result}`;
image.className = "img-thumbnail add-image-thumb";
let closeBtn = `<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span> </button>`;
$('#images-to-upload').append(image);
$('#images-to-upload').append(closeBtn);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function () {
readURL(this);
});
And the html part:
<div id="images-to-upload" class="mb-3"> </div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="imgInp" >
<label class="custom-file-label" for="image-input"></label>
</div>
</div>
<small class="form-text text-muted">Upload one or more images</small>
<br>
CSS:
.add-image-thumb{
max-height: 64px;
margin: 10px;
padding: 5px;
}
This works fine for one image, but for multiple images, all x go to the right side of the page.
The problem is how can I put the x button at the top left corner of each image.
I could not construct a div out of Base64 images, otherwise I could mangage to acheive that through CSS.

I could not construct a div out of Base64 images, otherwise I could mangage to acheive that through CSS.
Wrap a div around the image
let wrapper = $('<div class="image-wrapper" />');
$('#images-to-upload').append(wrapper)
$(wrapper).append(image);
$(wrapper).append(closeBtn);
Use the below CSS
.image-wrapper {
display: inline-block;
position: relative;
}
.image-wrapper button {
position: absolute;
top: 0;
right: 0;
}

Jquery Crop: cropper image not changing

I have the following code:
<link rel="stylesheet" href="style.css">
<script src="/static/js/jquery/2.1.4/jquery.min.js"></script>
<script src="http://fengyuanchen.github.io/cropper/js/cropper.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<img id="crop" style="width:400px;height:200px;" />
<div id="img2" style="position: relative; overflow: hidden; border: 1px solid #000; background: #fff; width: 100px; height: 100px;"></div>
X: <input type="text" id="crop_x" name="crop_x" /><br />
Y: <input type="text" id="crop_y" name="crop_y" /><br />
Width: <input type="text" id="crop_width" name="crop_width" /><br />
Height: <input type="text" id="crop_height" name="crop_height" /><br />
<input type="file" id="file" name="file" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
<script>
var url = null;
$('#file').on('change',function(){
var file = this.files[0];
if(url != null){
URL.revokeObjectURL(url);
}
url = URL.createObjectURL(file);
startCropper();
});
function startCropper(){
$('#crop').removeAttr('src');
$('#crop').attr('src',url);
$('#crop').cropper({
viewMode : 0,
cropBoxResizable : false,
minCropBoxWidth : 100,
minCropBoxHeight : 100,
dragMode : 'none',
preview : $('#img2'),
aspectRatio: 1,
crop : function(e){
$('#crop_x').val(e.x);
$('#crop_y').val(e.y);
}
});
};
</script>
The problem is that when I select a new file, the new image is not showed (the old image is still displayed in the cropper).
As you can see, I check the old url and revoke this. When I don't use $("#crop").cropper({...}) in the startCropper() function, it works.
GitHub: https://github.com/fengyuanchen/cropper/tree/v2.3.0
How can I force the cropper to load the new image?

You need to call
$('#crop').cropper('destroy');
before crop initialization

This code will solve the problem of Image not changing in Cropper.
HTML
<input id="userImage" type="file" name="userImage" accept="image/*">
<div>
<canvas id="canvas" style="display: none;">
Your browser does not support the HTML5 canvas element.
</canvas>
</div>
<div id="imagePreview" style="position: relative; overflow: hidden; border: 1px solid #000; background: #fff; width: 100px; height: 100px;"></div>
CSS
img {max-width: 100%;} /* This rule is very important, please do not ignore this! */
#canvas {
height: auto;
width: 250px; /*Change this value according to your need*/
background-color: #ffffff;
cursor: default;
border: 1px solid #000;
}
JS
var canvas = $("#canvas");
context = canvas.get(0).getContext("2d");
$('#userImage').on( 'change', function(){
if (this.files && this.files[0]) {
if ( this.files[0].type.match(/^image\//) ) {
var reader = new FileReader();
reader.onload = function(evt) {
var img = new Image();
img.onload = function() {
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
// Destroy the old cropper instance
canvas.cropper('destroy');
// Replace url
canvas.attr('src', this.result);
var cropper = canvas.cropper({
//these options can be changed or modified according to need
viewMode: 0,
cropBoxResizable: false,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
dragMode: 'none',
preview: $('#imagePreview'),
aspectRatio: 1,
crop : function(e){
$('#crop_x').val(e.x);
$('#crop_y').val(e.y);
}
});
};
img.src = evt.target.result;
};
reader.readAsDataURL(this.files[0]);
} else {
alert("Invalid file type! Please select an image file.");
}
} else {
alert('No file(s) selected.');
}
});
For more details and better understanding Visit
Cropper Official Documentation

For cropper JS 1.3.3 it is cropper.destroy(); instead of canvas.cropper('destroy') after the drawing of the canvas.
`

jQuery an element with for a url

I have 3 divs with data-image="1" data-image="2" data-image="3".
And I have variable $img_nubmer.
I need to take the div's background-image url from element with data-image = $img_nubmer.
Something like $url = $("'.img[data-image="+$img_number+"']").css("background-image")
How could I do that please?

I would try
$img_number = 5; // just an example
$url = $("img[data-image='"+$img_number+"']").css("background-image"); // grab the background property
So for a full example:
window.getURL = function() {
$img_number = $('[type="number"]').val();
$url = $("[data-image='" + $img_number + "']").css("background-image");
$url = $url.replace('url(', '').replace(')', ''); // lose the extra details
alert($url);
}
div.image {
background-image: url('http://graph.facebook.com/205500370/picture?type=large');
height: 150px;
width: 150px;
}
div {
display: inline-block;
vertical-align: middle;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image" data-image="5"></div>
<div>
<input type="number" value="5" />
<br>
<button onclick="getURL()">Get Image URL</button>
</div>

You can add the variable into your selector as such:
var img_number = 1;
$('img[data-image="'+img_number+'"]');
View Codepen example

Remove button for each image thumbnail preview

hello, i need your help for my codes. I want to preview multiple images before upload and there are remove button in each images. But my code doesn't work when i'm using div targetting in each remove button.
the first, my codes is like THIS FIDDLE 1.
and when i'm add some changes become THIS FIDDLE 2
my HTML :
<body>
<header>
<h1>File API - FileReader</h1>
</header>
<article>
<label for="files">Select multiple files: </label>
<input id="files" type="file" multiple/>
<output id="result" />
</article>
and CSS :
body{
font-family: 'Segoe UI';
font-size: 12pt;
}
header h1{
font-size:12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;
}
article
{
width: 80%;
margin:auto;
margin-top:10px;
}
.thumbnail{
height: 100px;
margin: 10px;
}
it's my javascripts :
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
if(!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/> <a href='#' class='remove_pict'>X</a>";
output.insertBefore(div,null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log("Your browser does not support File API");
}
}
thanks for advance. any suggestions much be appreciated ^^

Image and delete anchor are children of div object. Put click event on each a, then delete the parent. So when user click the x mark, selected image will be deleted.
div.children[1].addEventListener("click", function(event){
div.parentNode.removeChild(div);
});
see demo at http://jsfiddle.net/L45LW/5/

$("#result").on( "click",".remove_pict",function(){
$(this).parent().remove();
});
This may be help you