# Add Media Gallery by Code

**URL:** <https://forum.wixstudio.com/t/add-media-gallery-by-code/9875>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [November 30, 2022, 4:31am UTC](https://forum.wixstudio.com/t/add-media-gallery-by-code/9875 "2022-11-30T04:31:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![adrianahood](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/adrianahood/32/35529_2.png) [@adrianahood](https://forum.wixstudio.com/u/adrianahood)\
**Post date:** [November 30, 2022, 4:31am UTC](https://forum.wixstudio.com/t/add-media-gallery-by-code/9875/1 "2022-11-30T04:31:33Z")

</div>

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://us1.discourse-cdn.com/wix/original/3X/b/e/be34fec47124bfcbff8f6da1f9c98b0ecd4db6e4.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.

---

<div class="post-metadata">

**Author:** ![adrianahood](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/adrianahood/32/35529_2.png) [@adrianahood](https://forum.wixstudio.com/u/adrianahood)\
**Post date:** [December 1, 2022, 12:41am UTC](https://forum.wixstudio.com/t/add-media-gallery-by-code/9875/2 "2022-12-01T00:41:52Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![adrianahood](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/adrianahood/32/35529_2.png) [@adrianahood](https://forum.wixstudio.com/u/adrianahood)\
**Post date:** [December 1, 2022, 5:28pm UTC](https://forum.wixstudio.com/t/add-media-gallery-by-code/9875/3 "2022-12-01T17:28:59Z")

</div>

More progress: I was able to successfully add a single photo to a field with a ‘photo’ type. I followed the tutorial given here:

[![](https://us1.discourse-cdn.com/wix/original/3X/d/a/da6b2284c18aa72e14ac364457011c822986deb5.jpeg "Wix Velo Image Upload and Save Image Into Database Wix Collection") ](https://www.youtube.com/watch?v=_VCyKguxPQQ)

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?

---

<div class="post-metadata">

**Author:** ![adrianahood](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/adrianahood/32/35529_2.png) [@adrianahood](https://forum.wixstudio.com/u/adrianahood)\
**Post date:** [December 7, 2022, 1:09pm UTC](https://forum.wixstudio.com/t/add-media-gallery-by-code/9875/4 "2022-12-07T13:09:08Z")

</div>

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](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 ;  
//}  
}  
})  
}