Good afternoon, I am trying to implement the loading of images whit image preview that @andreas-kviby established in its example of classified web:
https://andreaskviby.wixsite.com/classifieds/new-ad
but I am having problems because apparently the name of uploadStatusText is not recognized in the code.
somebody could help me?
I really appreciate
the code:
let uploadedImageSizeLimit = 1500000;
let databaseNumberOfImages = 4;
$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("#uploadStatusText").hide();
$w("#uploadButton").buttonLabel = "cargando...";
$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 = "cargar mas";
if (items.length > databaseNumberOfImages) {
$w("#uploadButton").hide();
} else {
$w("#submitButton").enable();
$w("#dataset1").setFieldValue("image", items);
}
})
.catch((uploadError) => {
console.log(uploadError);
$w("#uploadButton").reset();
$w("#uploadButton").buttonLabel = "cargar";
$w("#uploadStatusText").text = "Ha ocurrido un error, intentelo nuevamente";
$w("#uploadStatusText").show();
});
} else {
$w("#uploadButton").reset();
$w("#uploadStatusText").text = " Max File Size : 15 Mb";
$w("#uploadStatusText").show();
}
}
export function submitButton_click(event) {
let nrOfImages = $w("#gallery").items.length;
if (nrOfImages > 0) {
$w("#dataset1").save()
.then((saved) => {
console.log(saved);
})
} else {
$w("#uploadStatusText").text = "You must at least upload one image to your ad!";
}
}
in the original code is the text under upload button “max file size 15mb” or not?
i create a text element with the ID #uploadStatusText
new error apears on preview
code lines
In fact the error comes out after the file is loaded
In fact the error comes out after a file is selected and an attempt is made to load the process starts and ends like this
The file starts loading but it is as if there was an error in the validation of the file size and then triggers the error and restarts the upload button, I have tried to increase the allowed image upload size and the error persists.
I am not at all skilled with the code, so I turn to the forum.
I appreciate your guidance
@deleteduser I have tried to implement another code solution that you suggested in the forum, but I still receive the same error in one of the images that I upload here you can see that a loading image was selected.
Have you simply tried doing all of this on a new page with just the upload button code as all your pics show that you have a good 100+ lines of code before you get to this part.
Plus, in your first pic, the let and onReady function should be at the top of your page and not over 100 lines down your page of code.
Therefore, I would suggest that you do the Wix tutorial from here on a fresh new page with no additional code on it at all.
https://support.wix.com/en/article/wix-code-using-the-upload-button-with-code
Then change it from an onClick event to the onChange event that Heath has changed it to in his code.
If this all works, then go ahead and redo the example from Andreas Kviby on either this page or another new page with only the code for Andreas example.
Although, please note that Andreas has not been with Wix for a good few years now so any of his websites or YouTube videos will be correct for when it was released, however if Wix has since changed a part of code somewhere, then this will not have been changed in any of the examples.
If you find that the original Wix example for the picture preview or with the onChange instead of the onClick or Andreas example all work on a new page with code for each example only.
Then you know that the code examples work fine and it is something else on your page that is affecting this and causing it not to work.
Thanks for your answer I solved it by deleting the load button and adding it again without modifying the code, apparently the wix editor lately is not as stable as we would like.
