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:
![](https://static.wixstatic.com/media/a27d24_b952f1a94a024f10ac89b9fa183940b9~mv2.png/v1/fill/w_980,h_277,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/a27d24_b952f1a94a024f10ac89b9fa183940b9~mv2.png)
Editing Mode:
![](https://static.wixstatic.com/media/a27d24_2c223ab5bd9f4f07bbefee2530d44586~mv2.png/v1/fill/w_980,h_296,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/a27d24_2c223ab5bd9f4f07bbefee2530d44586~mv2.png)
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);
})
}
}
Has this been resolved?
I have the same question.
If it has been resolved, please tell me how.
Use the remove() function.
https://www.wix.com/corvid/reference/wix-data.html#remove
https://www.wix.com/corvid/reference/wix-dataset.Dataset.html#remove
Simply search the forum and you will find previous posts that can help.
https://www.wix.com/corvid/forum/community-discussion/delete-pic-in-temporary-gallery-pre-form-submit
https://www.wix.com/corvid/forum/community-discussion/how-to-delete-the-item-on-my-database-collection