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.
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.
I did make some progress. I used the uploadFiles () method and was able to successfully upload the images via code. I used the code from here:
https://www.wix.com/velo/reference/$w/uploadbutton/uploadfiles
$w(“#myUploadButton”).fileType = “Image”; // Site visitor can choose an image
$w(‘#myButton’).onClick( () => {
if ($w(“#myUploadButton”).value.length > 0) { // Site visitor chose a file
console.log(“Uploading the following files:”)
$w(“#myUploadButton”).uploadFiles()
.then( (uploadedFiles) => {
uploadedFiles.forEach(uploadedFile => {
console.log(“File url:” + uploadedFile.fileUrl);
})
console.log(“Upload successful.”);
} )
.catch( (uploadError) => {
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
} );
}
else { // Site visitor clicked button but didn’t choose a file
console.log(“Please choose a file to upload.”)
}
} );
This produced an output of the Wix URL of each photo after it has been uploaded.
Now, I need to know what do I need to add to the dataset. I tried adding the URL (uploadedFile.fileUrl) but it did not work.
Thank you in advance.
More progress: I was able to successfully add a single photo to a field with a ‘photo’ type. I followed the tutorial given here:
It was a simple matter of uploading the image and writing the resulting URL to the dataset. When I looked at the dataset, I saw a photo, not the URL text. This is the expected result. However, this was not the case for the media gallery. Do I need to create a MediaGallery object (if that exists), and then populate it with URLs prior to adding it to the dataset?
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 Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// 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 ;
//}
}
})
}
