1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'JavaScript' started by mstdmstd, Apr 7, 2021.

  1. #1
    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!
     
    Solved! View solution.
    mstdmstd, Apr 7, 2021 IP
  2. #2
    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.
     
    deathshadow, Apr 10, 2021 IP