Code to insert images into a datacollection

Ask the community
,
1

Hi,

I have quite a few user input fields, text, image and dropdown. I can insert everything using the value property, but don’t know how to put the image in the database. Here’s part of the code that happens on button click:

let artTitle = $w("#input1").value;   
let description = $w("#textBox1").value; 
let dimensions = $w("#input2").value; 
let image = $w("#uploadButton1").value; 
let medium = $w("#dropdown1").value; 

if (user.loggedIn) { 
user.getEmail() 
	.then(email => { 
		let toInsert = { 
       	    "email": email, 
        	   "artTitle": artTitle, 
        	   "description": description, 
        	   "dimensions": dimensions, 
        	   "image": image, 
        	   "medium": medium, 
          }; 
wixData.insert("datacollectionName", toInsert)

The above code, does not insert the image. It give the following error:

So, what’s the right way to code to insert images?

2

Hi MJ.

Did you see the following example how to retrieve the uploaded file URL from UploadButton component?

The URL can be set to the image column.

Regards,
Genry.

3

Hi Genry,

Thank you!!! Got it to work.

Regards.

MJ

4

You are welcome :slight_smile:

Regards,
Genry.

5

Hi MJ! Can you share how you got it to work. I have a similar problem and almost identical code to the one you first posted using toInsert. I’ve looked through the API Tiaan referenced, but I don’t see what you guys are referring to “how to retrieve the uploaded file URL from UploadButton component”

Here is a snippet from my code. Again, everything else inserts to the database, except the uploaded image:

export function SubmitStory_click(event, $w) {
 if ($w('#checkbox2').checked) {
 let toInsert = {
 "title": $w('#inputName').value,
 "email": $w('#inputEmail').value,
 "city": $w('#inputCity').value,
 "country": $w('#inputCountry').value,
 "selfie": $w('#uploadPicture').value,
 "termsOfService": true
        };
        wixData.insert("Stories", toInsert)
        .then((item)=>wixLocation.to("/Story-Confirm/"+item._id));
        $w('#textFailure').hide();
        $w('#textSuccess').show();
 
    }else{
        $w('#textSuccess').hide();
        $w('#textFailure').show();
    }

Any help you can provide is greatly appreciated!

6

First you’ll need to upload your image, then do the insert. So before your insert statement add:

$w(" #uploadPicture ").startUpload()
.then( (uploadedFile) => {
return uploadedFile.url;
} )

//Then your insert statement should follow
.then( (resultUrl) => {
let toInsert = {
“title”: $w(’ #inputName ‘).value,
“email”: $w(’ #inputEmail ‘).value,
“city”: $w(’ #inputCity ‘).value,
“country”: $w(’ #inputCountry ').value,
“selfie”: resultUrl,
“termsOfService”: true
};

wixData.insert(“Stories”, toInsert)
etc…

Hope this helps.

7

Amazing. Yes, this makes much more sense than other options presented it to me. I’m almost there but there is still something missing. I added it to my code… I am still getting one error in my code though, on " .then( (resultUrl) => { "

It says “parsing error: unexpected token”

export function SubmitStory_click(event, $w) {
    $w(" #uploadPicture").startUpload()
 .then( (uploadedFile) => {
 return uploadedFile.url;
  })
 if ($w('checkbox1').checked && $w('#checkbox2').checked) {
        .then( (resultUrl) => {
 let toInsert = {
 "title": $w('#inputName').value,
 "email": $w('#inputEmail').value,
 "city": $w('#inputCity').value,
 "country": $w('#inputCountry').value,
 "selfie": resultUrl,
 "termsOfService": true
        };
        wixData.insert("Stories", toInsert)
        .then((item)=>wixLocation.to("/Story-Confirm/"+item._id));
        $w('#textFailure').hide();
        $w('#textSuccess').show();
 
    }else{
        $w('#textSuccess').hide();
        $w('#textFailure').show();
    }
}
8

Hi Ashley.

You should place the statement

.then( (resultUrl) => {

before the “if”, and place the enclosing brace } at the end of the function.

Regards,
Genry.

9

Hi Genry! Thank you so much. I had to leave this for a bit and just revisited. I did as you suggested and placed .then( (resultURL) => { before the if statement and placed the enclosing brace at the end of the function. The error message disappeared but a new one appeared at the end of this enclosing bracket… Any ideas? Thank you for your assistance!

I’m also a little confused as to why I can’t just use this form without code. But two things happen when I remove the code. 1. The submit button only gives me the option to go to two dynamic pages, not the third dynamic page I set up as a confirmation page. 2. all the info inserts into the database, except the image again…

When I put this code back in, nothing happens. Submit button doesn’t work and no error message appears in preview.

import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';

$w.onReady(function () {

});

export function SubmitStory_click(event, $w) {
    $w(" #uploadPicture").startUpload()
 .then( (uploadedFile) => {
 return uploadedFile.url;
  })
.then( (resultUrl) => {
 if ($w('checkbox1').checked && $w('#checkbox2').checked) {
 let toInsert = {
 "title": $w('#inputName').value,
 "email": $w('#inputEmail').value,
 "city": $w('#inputCity').value,
 "country": $w('#inputCountry').value,
 "selfie": resultUrl,
 "when": $w('#textBox1').value,
 "describe": $w('#textBox2').value,
 "whatScaresYou": $w('#textBox3').value,
 "forWho": $w('#textBox4').value,
 "how": $w('#textBox5').value,
 "motto": $w('#textBox6').value,
 "admire": $w('#textBox7').value,
 "interview": true,
 "termsOfService": true
        };
        wixData.insert("Stories", toInsert)
        .then((item)=>wixLocation.to("/Story-new/"+item._id));
        $w('#textFailure').hide();
        $w('#textSuccess').show();
 
    }else{
        $w('#textSuccess').hide();
        $w('#textFailure').show();
    }
  }

598×528 53.2 KB

10

Hi Ashley.

Please pay attention that there is no closing parenthesis to the statement:

.then( (resultUrl) => {
   ...
}

before the end function closing curly brace.

So you need to add the following (in bold)

.then( (resultUrl) => { 
   ... 
});
}

Regards,
Genry.

11

I got the same problem and wasn’t able to fix it with this helpsheet. Can anyone help?

import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(function () {})

export function SubmitStory_click(event, $w) {
    $w(" #uploadPicture").startUpload()
 .then( (uploadedFile) => {
 return uploadedFile.url;
  })
.then( (resultUrl) => {
    console.log(resultUrl)
    $w("#button1").onClick(() => {
 let At = 
            $w("#Art").value;
            console.log(At)
 let Rn =
            $w("#Ringnummer").value;
            console.log(Rn)
 let Fr = 
            $w("#Farbreihe").value;
            console.log(At)
 let Fs =
            $w("#Farbschlag").value;
            console.log(Rn)
 let Gs = 
            $w("#Geschlecht").value;
            console.log(At)
 let Ze =
            $w("#Zeichnung").value;
            console.log(Rn)
 let GD = 
            $w("#datePicker1").value;
            console.log(At)
 let Zt =
            $w("#Zutraulichkeit").value;
            console.log(Rn)
 let Zü =
            $w("#Zuchter").value;
            console.log(Rn)
 let Pr = 
            $w("#Preis").value;
            console.log(At)
 let Ti =
            $w("#Titel").value;
            console.log(Rn)
 let Kb =
            $w("#Kurzbeschreibung").value;
            console.log(Rn)
 let Lb = 
            $w("#Beschreibung").value;
            console.log(At)

 let input = {
 "Art": [At],
 "Ringnummer": [Rn],
 "Farbreihe" : [Fr],
 "Farbschlag": [Fs],
 "Geschlecht": [Gs],
 "Zeichnung": [Ze],
 "Geburtsdatum": [GD],
 "Zutraulichkeit": [Zt],
 "Züchter": [Zü],
 "Preis": [Pr],
 "Titel": [Ti],
 "Kurzbeschreibung": [Kb],
 "Beschreibung": [Lb],
 "bilder": resultUrl,
 "art": [At],
 "ringnummer": Rn,
 "farbreihe" : Fr,
 "farbschlag": Fs,
 "geschlecht": Gs,
 "zeichnung": Ze,
 "zutraulichkeit": Zt,
 "züchter": Zü,
 "preis": Pr,
 "titel": Ti,
 "kurzbeschreibung": Kb,
 "beschreibung": Lb,
 "Id": $w("#input1").value
        }
        wixData.insert("Bestand",input)
    })
});
}

I didn’t find any other solution but to store all my data twice as a JS and as a “normal” file because I need to run a querry with user inputs and the querry always counts the user input as a JS file and can’t find any matches if I don’t use Js files. On the other hand I need to use normal files because of my dynamic page.
If someone is interested in fixing this problem:

import wixData from 'wix-data';
export function dropdown1_change(event) {
  console.log($w("#dropdown1").value)

 wixData.query("Wellensittiche") 
 
  .eq("Art",$w("#dropdown1").value)
  .find()  
  .then( (res) => {   
 
     console.log(res);
   });
}

I really hope you can help me with my first problem because I’ve been sitting on this for a long time now and I don’t want to start all over again.