Why I can not set width/height of uploaded with with JS code

Hello,

In Laravel 8 / tailwindcss 2 / Alpinejs 2.8 app I have a form when current image is shown and
new image 1) can be selected with preview and 2) Saved by Js code with axios
request 3) on successfull upload current image is replaces with new preview image
and I have a problem when current image has big size then new uploade image looks broken.
I try to fix it with js code setting size to image on the form size of new uploaded file :

window.axios.post('/admin/settings/app_big_logo/images/upload', imageUploadData).then((response) => {
let img_app_big_logo = document.querySelector("#img_app_big_logo") // show uploaded image @endsection the form
if (img_app_big_logo) {
// set new uploaded image
img_app_big_logo.src = response.data.settingsItemImgProps.image_url + ( '?dt=' + Math.floor(Date.now() / 1000) )

console.log('document.querySelector("#img_preview_app_big_logo").width::')
console.log(document.querySelector("#img_preview_app_big_logo").width)
// I got width/height of new uploaded image - in console I see small values of image

// But after assigning width/height of preview image
img_app_big_logo.width= document.querySelector("#img_preview_app_big_logo").width //+ "px"
img_app_big_logo.height= document.querySelector("#img_preview_app_big_logo").height //+ "px"

// I check and see prior width/height of PRIOR BIG image - so new uploaded image looks broken
console.log('img_app_big_logo.width::')
console.log(img_app_big_logo.width)
console.log('img_app_big_logo.height::')
console.log(img_app_big_logo.height)
...
}
}).catch((error) => {
console.error(error)

});

Why error and how can it be fixed ?

Thanks!

 

You don't set width/height directly on the element. You assign them as Element.style! I'd also advise against doing querySelector of the same blasted thing over and over and over again as that will perform like crap. Likewise document.querySelector is less performant than getElementById, so if you only need it by ID, use the older method.

Likewise reading the width is something you would/should be doing with clientWidth and clientHeight, since by reading just "width" and "height" you're pulling what's set in those attributes, NOT the actual renders size. Also if you REALLY want to set the attributes in the markup, you don't say "px" on them, and it's kind of pointless to set the width and height to the value of itself.

Also stop omitting the semi-colons, it can cause you headaches if you're not wasting time being extra careful.

Guessing wildly, but what I suspect you're trying to do is:

let img_app_big_logo = document.getElementById("img_app_big_logo"),
	
if (img_app_big_logo) {
	let img_preview_app_big_logo = document.getElementById("img_preview_app_big_logo");
	img_app_big_logo.style.width = img_preview_app_big_logo.clientWidth + "px";
	img_app_big_logo.style.height = img_preview_app_big_logo.clientHeight + "px";
	img_app_big_logo.src = response.data.settingsItemImgProps.image_url + (
		'?dt=' + Math.floor(Date.now() / 1000)
	);
}

Code (markup):

Note drive-by code, might have typos

That said, I'd punch myself in the face with names that long using nothing but underscores.