Form submission to Collection, Media Gallery error

[user1748]

Question:
Im having problems saving media to a Media Gallery field on my collection.

Product:
Wix Studio

What are you trying to achieve:
What I’m trying to do here is on the form submission, send all the information plus the userId to the collection.

What have you already tried:
Searched documentation and on the web.

Additional information:
The problem I’m having is that after I submit, it creates 2 instances on the collection, one of them has the images on the media gallery and not the userID, the other has the userId but not the media gallery. (I’ll send screenshots).

frontend code

import wixUsers from 'wix-users';
import { uploadApprovalProduct } from 'backend/fileUpload.web'; 

$w.onReady(function () {
    // Add event handler to submit button
    $w('#button7').onClick(async () => {
        try {
            const userId = wixUsers.currentUser.id; // Get the current user's ID
            const productName = $w("#productNameInput").value;
            const productDescription = $w("#productDescInput").value;
            const productBrand = $w("#brandInput").value;
            
            // Get the media items data from the file upload element
            const mediaItemsData = $w("#productApprovalImages").value;

            // Call the backend function to upload the product
            const result = await uploadApprovalProduct(userId, productName, productDescription, productBrand, mediaItemsData);
            console.log(result); // Handle the response
        } catch (error) {
            console.error("Error submitting data: ", error);
            // Handle error
        }
    });
});

backend module

// Filename: fileUpload.web.js
import { Permissions, webMethod } from 'wix-web-module';
import wixData from 'wix-data';

export const uploadApprovalProduct = webMethod(Permissions.SiteMember, async (userId, productName, productDescription, productBrand, mediaItemsData) => {
    try {
        const mediaItems = [];

        // Iterate over the array of file objects
        for (const file of mediaItemsData) {
            // Construct the URL for the file
            const src = file.url;

            // Extract the file name (used as title) and file size
            const title = file.name;
            const description = `File size: ${file.size} bytes`;

            // Create a new media item object with src, title, and description
            const mediaItem = { src, title, description };

            // Push the media item object to the mediaItems array
            mediaItems.push(mediaItem);
        }

        // Insert product data, image URLs, and userID into the collection
        await wixData.insert('approvalProduct', {
            'userId': userId,
            'productApprovalName': productName,
            'productApprovalDescription': productDescription,
            'productApprovalBrand': productBrand,
            'productApprovalMedia': mediaItems
        });

        return 'Data submitted successfully';
    } catch (error) {
        console.error('Error uploading files and inserting data:', error);
        throw error;
    }
});

[Bryan13]

@user1748

description

Hi, you are missing the field type. I made a similar implementation in which I had to pass an image from the cms to the gallery and this is my code, I went through the entire collection and created the json array to assign the image to the gallery

import { Permissions, webMethod } from "wix-web-module";
import wixData from 'wix-data';

const wixDataOptions = { "suppressAuth": true, "suppressHooks": true };

export const updateImages = webMethod(Permissions.Anyone, async () => {
    return await wixData.query("Products").isEmpty("mediagallery").find().then(async (result) => {
        let items = result.items;
        console.log("items", items)
        let updateA = []
        for (let i = 0; i < items.length; i++) {
            let item = items[i];
            item.mediagallery = [{
                title: item.name,
                alt: item.name,
                src: item.image,
                description: "",
                type: "image"
            }]
            updateA.push(item)
        }
        console.log("updateA", updateA)
        await wixData.bulkUpdate("Products", updateA, wixDataOptions)
            .catch((err) => console.log(err))
        return "Ok"
    }).catch((err) => console.log(err))
});