with the help of others, I finally created the uploading multiple images and previewing with the gallery as shown below:
Trying to achieve: I am trying to delete the user (or visitor) uploaded image whenever someone clicks the ‘X’ shown just below.
Does anyone have a clue with the coding?
Handicap: I cannot use repeaters because I am using Editor X, which does not support Image Fit-mode: https://www.wix.com/corvid/reference/$w.Image.html#fitMode .
Preview:
Editing Mode:
Code:
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
let uploadedImageSizeLimit = 15000000;
let databaseNumberOfImages = 10;
$w.onReady(function () {
//TODO: write your page related code here...
});
export function uploadButton_change(event, $w) {
if ($w("#gallery").items.length > 0) {
if ($w("#gallery").items[0].title === "noImageUploadedImage") {
let items = $w("#gallery").items;
items.splice($w("#gallery").items[0], 1);
$w("#gallery").items = items;
}
}
$w("#gallery").show();
let selectedFile = $w("#uploadButton").value;
let selectedFileSize = selectedFile[0].size;
console.log(selectedFileSize);
if (selectedFileSize < uploadedImageSizeLimit) {
$w("#uploadButton").buttonLabel = "Uploading...";
$w("#uploadButton").startUpload()
.then((uploadedFile) => {
let uploadfileurl = uploadedFile.url;
console.log(uploadfileurl);
let items = $w("#gallery").items;
items.push({
"src": uploadfileurl,
"description": "",
"title": ""
});
$w("#gallery").items = items;
$w("#uploadButton").reset();
$w("#uploadButton").buttonLabel = "Upload more";
if (items.length > databaseNumberOfImages) {
$w("#uploadButton").hide();
} else {
$w("#submitButton").enable();
$w("#dataset1").setFieldValue("Gallery", items);
}
})
.catch((uploadError) => {
console.log(uploadError);
$w("#uploadButton").reset();
$w("#uploadButton").buttonLabel = "Upload";
});
} else {
$w("#uploadButton").reset();
}
}
export function submitButton_click(event) {
let nrOfImages = $w("#gallery").items.length;
if (nrOfImages > 0) {
$w("#dataset1").save()
.then((saved) => {
console.log(saved);
})
}
}