Question:
I have a question regarding how to properly upload images from a custom form with some text inputs and an upload button to pass photos to a CMS media gallery field in my data collection using Velo with the proper format.
Product:
Wix Studio Editor
What are you trying to achieve:
I am trying to pass up to 3 image files to my data collection media gallery field (field ID: images)
What have you already tried:
My relevant code is as follows:
$w.onReady(function () {
$w(“#uploadButton”).fileType = ‘Gallery’; // Set fileType to ‘Gallery’
async function handleFileUploads() {
const uploadButton = $w(“#uploadButton”);
const files = uploadButton.value; // value to get the files list
if (files.length === 0) {
return ;
}
console.log(“Files selected for upload:”, files);
const uploadResults = await uploadButton.uploadFiles();
const failedUploads = uploadResults.filter(result => !result.fileUrl);
if (failedUploads.length > 0) {
const errorMessages = failedUploads.map(f => f.validationMessage || “Unknown error”).join(", ");
showValidationError("Some files failed to upload: " + errorMessages);
return null;
}
// Return ImageItem objects formatted for the media gallery
return uploadResults.map(result => ({
type: ‘image’,
src: result.fileUrl,
title: ‘Uploaded Image’,
description: ‘’,
link: ‘’
}));
}
Which results in this:
Additional information:
I am relatively new to Velo and still have a lot to learn. Any guidance would be very much appreciated.