Preview image

[lurtnowski]

I have a form to create a sit which allows an image preview. When a site is created, everything seems good. When I try and edit it and replace the image, I get

but the elements are there

can the src not be reset?

[m_hutley]

const previewContainerSite = document.getElementById("Image_Preview_ContainerEditSite");
const previewImageSite = previewContainerBuilding.querySelector(".Image_PreviewEditSite");

What’s previewContainerBuilding set to? Did you confuse previewContainerBuilding with previewContainerSite?

[lurtnowski]

thanks, sorry to waste your time but sometimesz its good to have a fresh set of eyes…

[m_hutley]

We’ve all been there

[lurtnowski]

1 more thing. When I change the image, I get

<img src="undefined" alt="Image Preview" style="height:100%" class="Image_PreviewEditSite">

How does the src become undefined?

const inpFileSite = document.getElementById("customFileEditSite");
const previewContainerSite = document.getElementById("Image_Preview_ContainerEditSite");
const previewImageSite = previewContainerSite.querySelector(".Image_PreviewEditSite");
const previewImageTextSite = previewContainerSite.querySelector(".Image_Preview_Default_TextEditSite");

inpFileSite.addEventListener("change", function() {
	previewImageSite.setAttribute("src", this.result);
	const file2 = this.files[0];
		
	if(file2) {
		const reader2 = new FileReader();

		previewImageTextSite.style.display = "none";
		previewImageSite.style.display = "block";
		
		reader2.addEventListener("load", function() {
		previewImageSite.setAttribute("src", this.result);
	});	
			
	reader2.readAsDataURL(file2);
	
	} else {
		previewImageTextSite.style.display = null;
		previewImageSite.style.display = null;
		previewImageSite.setAttribute("src", '');
		
	}
});

[m_hutley]

@lurtnowski

previewImageSite.setAttribute("src", this.result);

far as i know, a file input does not have an attribute “result”. Did you mean value? (Note that i’m talking about the first one. The second one is referring to the FileReader.)

[lurtnowski]

I tried

previewImageSite.setAttribute("src", this.value);

but the result is still

<img src="und\efined":  ..

should i folllow

How to Preview an Image Before Upload using JavaScript

[m_hutley]

use a breakpoint after the line to figure out what this is, and where the code goes from there to make sure the value isnt getting overridden by, fir example, your else clause.

[lurtnowski]

when I put debugger after the line, I get

the outerHTMLhas undefined as the src,
hen I use .value and re,load I get

the outerHTML value is different.
am I looking at the wrong thing?

[Pepster64]

Could you simply do this previewImageSite.src = this.result?

[lurtnowski]

YES! that works…
But tne result starts like

then changes to

but the php for the image is

<?php	
if(file_exists('images/'.$site_id.'.png')) {
echo '<img src="images/'.$site_id.'.png" alt="Image Preview" style="height:100%" class="Image_PreviewEditSite">';
echo '<span class="Image_Preview_Default_TextEditSite" style="display:none"></span>';
} else {
echo '<img src="" alt="Image Preview" style="display:none; height:100%" class="Image_PreviewEditSite">';
echo '<span class="Image_Preview_Default_TextEditSite">Image Preview</span>';
}
?>	

But when I inspect the 2nd image

I don’t see the error
.

[lurtnowski]

but it seems to work with

then