Upload image and preview in gallery

Ask the community
,
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