How to show an updated image on the page?

Ask the community
,
1

I want to allow users to update their photo so they can see the existing picture on the page, then they upload the new one and ‘click’, the new image replaces the old one.

I’ve coded this on a button, to be clicked after the new image is uploaded:

export function buttonImage_click ( event ) {
$w ( “#uploadButton” ). startUpload ()
. then ( ( uploadedFile ) => {
$w ( “#image1” ). src = uploadedFile . url ;
})
}

But the image shown in #image1 doesn’t change. The new picture does show when #image1 is not connected to the database field, but of course, then the existing image isn’t shown.

Thanks for any help with this.

2

You will need to disconnect the image from the collection field. You can set the image to the existing image using code.

3

Thanks, would it be possible to see that code?

4

To show the existing image when the page loads, you can do something like this:

$w.onReady( () => {
  $w("#dataset").onReady( () => {
    let itemObj = $w("#myDataset").getCurrentItem();
    $w("#image1").src = itemObj.image
  } );
} );