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?
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.
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.
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(); } }
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.
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(); } }
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.
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!
You are welcome :)
Regards,
Genry.
Hi Genry,
Thank you!!! Got it to work.
Regards.
MJ
Hi MJ.
Did you see the following example how to retrieve the uploaded file URL from UploadButton component?
https://www.wix.com/code/reference/$w.UploadButton.html
The URL can be set to the image column.
Regards,
Genry.