Upload image and preview in gallery

Ask the community
,
1

hello friends I’m trying to upload images and have them be seen in a gallery before saving to be able to edit and then upload

I tried this code but I can’t find a way to adapt it for a gallery
could any help me? thanks!

$w.onReady(function () {

    let defaultImage = $w("#image").src;

    $w("#uploadButton").onChange(() => {
        if ($w("#uploadButton").value.length > 0) {
            $w("#preloaderContainer").show();

            // To prevent showing the previous image once a new one is uploaded
            $w("#image").src="";
            
            $w("#uploadButton").startUpload()
                .then((uploadedFile) => {
                    $w("#image").src = uploadedFile.url;
                })
                .catch(err => {
                    console.log(err, "Something went wrong")
                })
                .finally(() => {
                    $w("#preloaderContainer").hide();
                })
        } else {
            // If the user clicks X on the upload button, reset the image to the default one 
            $w("#image").src = defaultImage;
        }
    })

});
2

A gallary uses a very similar, or even the same data-structure like a repeater, consisting of an ARRAY […] holding OBJECTS {…} {…} {…}

$w("#myGallery").items = [{
  "type": "image",
  "title": "A View",
  "src": "wix:image://v1/99bc1c6f66444769b531221214c885ac.jpeg/A%20View.jpeg#originWidth=3264&originHeight=2448"
}, {
  "type": "video",
  "description": "Another beautiful view",
  "title": "Another View",
  "src": "wix:video://v1/80c05f_e2c524db1f264178a8558c92dbf76fb0/_#posterUri=80c05f_e2c524db1f264178a8558c92dbf76fb0f000.jpg&posterWidth=1920&posterHeight=1080"
}];

Where each object has it’s values like…

  1. type
  2. title
  3. src
  4. description
  5. and maybe also somekind of ID

Once you uploaded your pic you will get back the URL right?

.then((uploadedFile)=>{
    let myImageURL = uploadedFile.url;
})

This “myImageURL” now can be used to show it in an IMAGE or in a GALLARY.

To show it in an IMAGE — >

.then((uploadedFile)=>{
    $w("#image").src = uploadedFile.url;
 })

To show it in a GALLARY → you will first have to create your ARRAY holding the modified OBJECTS including all their VALUES.

let myGallaryItem = [{
  "type": "image",
  "title": "Your TITLE here",
  "description": "Your description here",
  "src": myImageURL
  }"
}];

Good luck

3

hello ninja! Thank you very much for answering. I understand the concept but I’m having a hard time applying it, could you make it functional for me? Cheers!

4

You know where and how to find me :wink: