Array format to populate a Media Gallery Field using wixData

In reading the many posts on populating Media Gallery Fields in Collections, most all are from several years ago before the new uploadFiles() API. Yes, you can wire up a dataset to populate a media gallery field from an upload button, but datasets create another layer of abstraction that is not always the best. (My own opinion, yours may vary.)

Using wixData rather than a dataset to populate a media gallery field is pretty straightforward, but you need to know the correct format of the image array to make it work.

Using the upload button's uploadFiles() method creates an array of UploadedFile objects. The important key in each object is the fileUrl. You cannot just load the fileUrl into a media gallery field, you need to add some additional information:

if ($w('#uploadButton').value.length > 0) {
        uploadResults = await $w('#uploadButton').uploadFiles();
        console.log(uploadResults);
        mediaGalleryArray = [];
        uploadResults.forEach((photo) => {
            mediaGalleryArray.push({ src: photo.fileUrl, type: "image" })
        })
    }

By adding the "src" key for the fileUrl and a value for the "type" key (in this case an image file), the array can then smoothly populate a media gallery field using wixData.

I hope this helps others who may be scratching their heads over this.