Upload Image to database

Ask the community
1

Hey Wix team,

I was wondering if someone can help me with my issue of being able to upload an image to a database via an onClick in a repeater?

$w("#uploadButton").onClick((event) => {
 let thisTrip = itemData._id
                        wixData.query("CourseAvailability")
                            .eq("_id", thisTrip)
                            .find()
                            .then((result) => {
                               let item = result.items[0];
                               item.guideImage = $w('#imageUploadButton').src;
                                item.guideName = $w('#guideNameInput').value;
                                wixData.update("CourseAvailability", item);
                                console.log(item)
                                $w("#uploadButton").label = "Success!";
                            })
                    })

1920×1080 258 KB

The guideName file updates but not the guideImage

Thank you!

2

Hi Stephen,

this can actually be done. But to get the uploaded image URL you need to trigger the upload action first. Action result will contain the actual URL.

You can find an example in our documentation here:
https://www.wix.com/corvid/reference/$w.UploadButton.html

I hope this helps.

3

@giedrius-grazevicius thanks for your response. I have the code working but only in preview mode not the live site… any thoughts? Databases have been synced.

$w("#uploadSubmitButton").onClick((event) => {
 let thisTrip = itemData._id
                        wixData.query("CourseAvailability")
                            .eq("_id", thisTrip)
                            .find()
                            .then((result) => {
 let item = result.items[0];
 if ($w("#uploadButton").value.length > 0) { // user chose a file
                                    $w("#text1").text = `Uploading - ${$w("#uploadButton").value[0].name}`;
                                    $w("#uploadButton").startUpload()
                                        .then((uploadedFile) => {
                                            $w("#text1").text = `${$w("#uploadButton").value[0].name} Uploaded!`;
                                            console.log("Upload successful. File is available here:");
                                            $w('#uploadSubmitButton').label = "Success!"
                                            item.guideImage = uploadedFile.url;
                                            item.guideName = $w('#guideNameInput').value;
                                            wixData.update("CourseAvailability", item);
                                        })
                                        .catch((uploadError) => {
                                            console.log(`File upload error: ${uploadError.errorCode}`);
                                            console.log(uploadError.errorDescription);
                                            $w('#uploadSubmitButton').label = "Error!"
                                        });
                                } else { // user clicked button but didn't chose a file
                                    $w("#text1").text = "Please choose a file to upload."
                                }
                                console.log(item)
 
                            })
                    })

Thank you!