I have a form that asks for details about an event and allows the user to upload images. All fields are inserted as a new entry into my collection. The photo and media gallery fields only show information about the files. I'm expecting them to be populated with my images.
My form has 4 input fields: eventName, eventDate, alphaProgram, and description.
It also has two upload buttons: coverImage and mediaGallery
Here is my code:
import wixData from 'wix-data';
let myDatabase ="myDatabase";
export function submitButton_click(event) {
let myItem = {
"title": $w("#eventName").value,
"eventDate": $w("#eventDate").value,
"alphaProgram": $w("#alphaProgram").value,
"mediagallery": $w("#mediaGallery").value,
"description": $w("#description").value,
"photo": $w("#coverImage").value,
}
console.log(myItem);
insertData(myItem);
}
function insertData(toInsert){
wixData.insert(myDatabase, toInsert)
.then((item) => {
console.log(item); //see item below
})
.catch((err) => {
console.log(err);
});
}
Below is a screenshot showing how the Photo and Media Gallery field is not populated with images as expected.
![](https://static.wixstatic.com/media/3b145b_f2683820d90843c8a3464ac6d917271d~mv2.png/v1/fill/w_49,h_5,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/3b145b_f2683820d90843c8a3464ac6d917271d~mv2.png)
What needs to be done to get the images into the database properly? I'm using dynamic pages, so I expect that after I submit the form, the cover photo and gallery will be ready to be viewed on that database's dynamic page.
Thank you in advance.
Wix support gave me the solution.
Uploading images directly to a media gallery field is not supported via Velo either.
This did work:
Save the URLs into an array and save them into a field of type Array. I had to change my Photo field from Photo to Array. This is my working code:
Code to upload the files:
async function uploadImages() { $w("#mediaGalleryButton").fileType = "Image"; // Site visitor can choose an image if ($w("#mediaGalleryButton").value.length > 0) { // Site visitor chose a file console.log("Uploading the following files:") await $w("#mediaGalleryButton").uploadFiles() .then(async (uploadedFiles) => { let myImages =[]; await uploadedFiles.forEach(uploadedFile => { myImages.push(uploadedFile.fileUrl); // create an array of URLs }) console.log("Upload successful."); $w("#txtUploadStatus").text = "Upload Successful" let myItem = { "title": $w("#eventName").value, "photo": myImages, // an array } insertData(myItem); $w("#txtEntryStatus").text = "Entry Successful"; }) .catch((uploadError) => { console.log("File upload error: " + uploadError.errorCode); console.log(uploadError.errorDescription); $w("#txtEntryStatus").text = uploadError.errorDescription; }) //return fileList; } else { // Site visitor clicked button but didn't choose a file console.log("Please choose a file to upload.") } } }
Code to insert the event into the database
function insertData(toInsert){ wixData.insert("myDatabase", toInsert) .then((item) => { console.log(item); //see item below }) .catch((err) => { console.log(err); }); }
Code on Dynamic Page to load photos into a Gallery object (#gallery1)
export function gallery1_viewportEnter(event) { // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4 // Add your code for this event here: console.log("Entered Gallery 1 Method"); var locId = $w("#dynamicDataset").getCurrentItem()._id console.log(locId); wixData.query("myDatabase") .eq("_id", locId) .find() .then((results) => { if (results.items.length > 0) { var myItem = results.items[0].photo; let items = []; { for (var i = 0; i < myItem.length; i++) { let photoObject = { "type": "Image", "title": "A Title", "src": myItem[i] } items.push(photoObject ) } $w("#gallery1").items = items; //} } }) }