GM: Image upload along with preprocessed data from user input

I have two fields Lat Name, First Name fields and an Image Upload button. Also I would like to add few more fields but before I want these name fields and Image successfully saved into database collection. I would like to validate the name fields in a different function before inserting into db. But the button1_click event does not save the image to the database. only name fields are saved. The code I have used is below. Also the screen image. Can anyone help on fixing this problem?

export function ChefDB_beforeInsert(item, context) {

let toUpdate = {
chefnamelast:toUpperFirst($w(‘#input1’).value),
chefnamefirst:toUpperFirst($w(‘#input2’).value),
chefimage:image_load ()
//chefimage:$w(‘#uploadButton1’).value
};

wixData.insert(“Chef”, toUpdate)
.then( (results) => {
let item1 = results; //see item below
console.log(“Item:”, item1)
} )
. catch ( (err) => {
let errorMsg = err;
} );

}
function toUpperFirst(s) {
let ch1 = s.charAt(0).toUpperCase() + s.slice(1);
console.log(ch1);
return ch1;
}

export function button1_click(event, $w) {
ChefDB_beforeInsert();
}

export function image_load () {
if ($w(“#uploadButton1”).value.length > 0) { // user chose a file
console.log(Uploading '${$w("#uploadButton1").value[0].name}');

$w("#uploadButton1").startUpload() 
  .then( (uploadedFile) => { 
    console.log("Upload successful. File is available here:"); 
    console.log(uploadedFile.url); 
  } ) 
  . **catch** ( (uploadError) => { 
    console.log(`File upload error: ${uploadError.errorCode}`); 
    console.log(uploadError.errorDescription); 
  } ); 

}
else { // user clicked button but didn’t chose a file
console.log(“Please choose a file to upload.”)
}

}

If you’ve defined the function ChefDB_beforeInsert() as a data hook , then you shouldn’t call it (as you have in the button1_click function). Data hooks are automatically invoked at the appropriate time of the data operation.

See the article How to Manipulate User Input Before It Is Stored in a Collection for more information.

Followed the above article but, it did not work. I added “Before Insert” hook for the table. Added code in data.js file. Called Chef_beforeInsert from button1_click as you mentioned. But, still did not work. Can you please give me detailed steps and code to resolve this problem?

@greenmango318 Well, the “detailed steps and code” are in the article that I linked to. If you continue to have problems, please post the URL of your site. Only authorized Wix personnel can get access to your site in the editor.