Adding Photo to Wix Database

Question

How can I save images on Wix Database Collection with also other data witch is in the same module?(the images are optional to upload) I have tried several ways, but the only results that I achieved are:

• When adding an image to the database it add the image on a new row
• When trying to add the image within the "nuovoOrdine" object it doesn't work

.

import wixData from 'wix-data';
import wixLocation from 'wix-location';
import {addOrderInfoVideo} from 'backend/creazioneVideoAdClassico'

export function button4_click(event) {

    if ($w('#input2').value != "") {

    var image1url;
    var image2url;
    var nuovoOrdine;
    var isFinished = false;


    // This way it saves the image on the Database but on a new element.. it should add this image on the same element that have the data below ("nuovoOrdine")
    // if ($w('#uploadButton4').value.length > 0) {
    //  $w('#uploadButton4').startUpload().then((uploadedFile)=>{
    //      image1url = uploadedFile.url
    //      nuovoOrdine = {
    //          'fileNecessari1': image1url
    //      }
    //      isFinished = true
    //      addOrderInfoVideo(nuovoOrdine)
    //  })
    // } else {
    //  if ($w('#uploadButton5').value.length > 0) {
    //      isFinished = false
    //  } else {
    //      isFinished = true
    //  }
    // }
    

    nuovoOrdine = {
        // this should return the uploaded image link but it doesn't 
        'fileNecessari1': $w('#uploadButton5').startUpload().then((uploadedFile)=>{
            return uploadedFile.url
        }),

        'puntiDiForza': $w('#textBox1').value,
        'numeroOrdine': $w('#input2').value,
        'colori': $w('#textBox2').value,
        'idea': $w('#textBox3').value,
        'link': $w('#input3').value,
        'nomeProdotto': $w('#textBox3DAC315').value,
        'concorrenza': $w('#textBox3DAC315DAC326').value,
        'contatti': $w('#input1').value,
        'dettagliExtra': $w('#textBox4').value,
        'slider1': $w('#slider1').value,
        'slider2': $w('#slider2').value,
        'slider3': $w('#slider3').value,
        'slider4': $w('#slider4').value,
        'slider5': $w('#slider5').value,
        'slider6': $w('#slider6').value,
        'slider7': $w('#slider7').value,
        'slider8': $w('#slider8').value,
        'slider9': $w('#slider9').value,
        'slider10': $w('#slider10').value,
        'slider11': $w('#slider11').value,
        'slider12': $w('#slider12').value,
        'slider13': $w('#slider13').value
    };

    addOrderInfoVideo(nuovoOrdine)

    // wixLocation.to('https://www.mywebsite.it/ringraziamenti-video-ads')

    } else {
        let textError = "Inserisci la mail con la quale hai effettuato l'ordine"
        $w('#text133').text = textError
        $w('#text133').text.bold()
    }
}

Answer 1

Well, we can't really see your data operations, so it's a bit hard to tell, but I definitely see at least one thing you're doing wrong.

On this line over here, you're not waiting for your promise to resolve, so the property will not have the value you are looking for:

'fileNecessari1': $w('#uploadButton5').startUpload().then((uploadedFile)=>{
    return uploadedFile.url
}),

Instead try something like this.

First add an async to you event handler function:

export async function button4_click(event) {

Then, do the image upload and wait for it to finish:

const uploadedFile = await $w('#uploadButton5').startUpload();
const uploadedUrl = uploadedFile.url;

Finally, create your object:

nuovoOrdine = {
    'fileNecessari1': uploadedUrl,        
    'puntiDiForza': $w('#textBox1').value,
    ...