hi
I am trying to figure out the code for uploading multiple images into the database with image upload button and delete image button. I tried to take out the code from the post on forum and make it working. There are errors I am getting. Since I am setting the number of images upload to 15 with maximum size of 2 mb/image in a single form submission. Code for it is.
import wixData from “wix-data”
$w . onReady ( function () {
//TODO: write your page related code here…
});
//Uploads new images into the gallery. This may be used multiple times to load //several images.
export function uploadButton_click ( event ) {
//Disable the submit button so that a submit does not happens //while uploading. $w(‘#SubmitButton’).disable();
//Beacuse everything is done manually some limits need to be set.
let uploadedImageSizeLimit = 2728640 ;
//2MB
let databaseNumberOfImages = 15 ;
//Grab the info about the selected file.
let selectedFile = $w ( “#uploadButton1” ). value ;
//Grab the size of the file.
let selectedFileSize = selectedFile [ 0 ]. size ;
//If the file size is less then the limit start the upload process.
if ( selectedFileSize < uploadedImageSizeLimit ) {
//Hide the status text box. Since the text shown by upload button cannot //be dirrectly controlled this avoids the file name shown on top of the txt. $w(“#uploadStatusText”).hide();
//Start the upload and change the button label. $w(“#uploadButton”).startUpload($w(“#uploadButton”).buttonLabel = “Uploading”) .then((uploadedFile) => {
//Grab the URL that the file was loaded to.
let uploadfileurl = uploadedFile . url ;
//Push will append itmes to the array.
//Store the image to the array.
items . push ({ “src” : uploadfileurl ,
“description” : “” ,
“title” : “”
});
//Now load the array with the newly appended item back into //the gallery. $w(“#gallery”).items = items;
//Reset the upload button. ?
$w ( “#uploadButton1” ). reset ();
//Change the button label back to the original one.
$w ( “#uploadButton1” ). buttonLabel = “Add an Image” ;
//Enable the delete image button because there are now //images to delete. $w(“#DeleteImageButton”).enable();
//Use the upload text to show the image uploaded successfully. $w(“#uploadStatusText”).text = “Image Uploaded”;
//Now that the file name is gone, show the upload text. $w(“#uploadStatusText”).show();
//When the max number of images is reached, //disable the upload button.
if ( items . length >= databaseNumberOfImages ) {
$w ( “#uploadButton1” ). disable ();
}
$w ( “#uploadButton1” ). reset ();
//Change the button label back to the original one.
$w ( “#uploadButton1” ). buttonLabel = “Add an Image” ;
//Use the upload text to show that a problem occured.
$w ( “#uploadStatusText” ). text = “File type not supported” ;
//Now that the file name is gone, show the error text.
$w ( “#uploadStatusText” ). show ();
});
} else {
//Reset the upload button.
$w ( “#uploadButton1” ). reset ();
//Use the upload text to show the max file size.
$w ( “#uploadStatusText” ). text = “Max FIle Size 2 MB” ;
//Now that the file name is gone, show the upload text. $w(“#uploadStatusText”).show();
}
//Enable submitt now that whatever is done.
$w ( ‘#button2’ ). enable ();
}
//Store all the entered data. Validate data before storing.
export function SubmitButton_click ( event ) {
//Disable the Submit button to prevent multiclick.
$w ( ‘#button2’ ). disable ();
//Create a flag that assumes eveything in the form is fine.
//The flag is set to false if something in the form is wrong.
let formGoodToGo = true ;
/Systematically validate all the inputs. This is done because the sumbit happens manually. This also makes sure that the required fields are sumbitted./
//Checks to see that the title is not blank. $w(‘#TitleTextBox’).onCustomValidation((value, reject) => {
if ( value === “” ) {
//Something in the form is wrong.
formGoodToGo = false ;
//Set the reject text. Not sure if this is actually needed.
reject ( “Blank” );
}