When using a Submit Button in a form, the image is stored perfectly in the collection image field by just connecting the Upload Button to the dataset image field.
For certain reasons, I need to code the Insert. I have the same upload button with the same connection. The below code just store the filename uploaded by the user. I need to store the image itself.
_____________________________________________
let toInsert = { "image1": $w("#uploadButton1").value, } wixData.save("sellers", toInsert)
Hi,
I recommend checking out this article about How to Use the Upload Button with Code.
After using the startUpload function, it returns an object with a url field of the image uploaded:
$w("#uploadButton1").startUpload() .then( (uploadedFile) => { $w("#text1").text = "Upload successful"; $w("#image1").src = uploadedFile.url; })
You can save this URL to your collection.
Good luck,
Tal.
A related question: I cannot simply use a URL field in a form to enter an image URL in an image field in a datasource, although with the datasource manager I can manually enter a URL in an image field.
Can I instead use an event trigger on the form submit button to grab an image URL that is entered in a text field and insert it by code as an image URL in a datasource image field? I'm interested in having data entered using provided image URLs from a central image CDN, rather than the data entry operator uploading actual images.
Thanks for your insights about this approach.
sorted thanks, Chris
I have used the following code, the let toInsert element is the code in focus. What should i do here please?
import wixData from 'wix-data'; export function uploadButton4_mouseIn(event) { $w('#text73').expand(); } export function uploadButton4_change(event) { $w('#button17').expand(); $w('#text71').expand(); $w('#text73').hide(); } export function button17_click(event) { if($w("#uploadButton4").value.length > 0) { $w("#text71").text = `Uploading ${$w("#uploadButton4").value[0].name}`; $w("#uploadButton4").startUpload() .then( (uploadedFile) => { $w("#text71").text = "Upload successful"; $w("#image37").src = uploadedFile.url; let toInsert = {= {"image37": $w("#uploadButton4").value, }; wixData.insert("freeImageUpload", toInsert) .then( (results) => { let item = results; //see item below } ) .catch( (err) => { let errorMsg = err; } ); }) .catch( (uploadError) => { $w("#text71").text = "File upload error"; console.log(`Error: ${uploadError.errorCode}`); console.log(uploadError.errorDescription); }); } else { $w("#text71").text = "Please choose a file to upload."; } $w('#button17').hide(); $w('#button18').expand(); $w('#text72').expand(); }
Thanks, it works perfectly. The article was excellent as well.