Insert Image In The Database From A Upload Function

Ask the community
,
1

Hello everybody! Now, What I am trying to achieve is none other than ------
How to insert image in database from the upload image function (using Code).

1918×904 151 KB

I want to create a new field in database from the image upload

1884×872 160 KB

My existing code is –


export function page1_viewportEnter(event) {
    $w('#button5').hide();
 
}
import wixData from 'wix-data';
import wixLocation from 'wix-location';
export function button6_click(event) {
let toInsert = {
 "name":        $w('#input1').value
};
 
wixData.insert("FoodItems", toInsert)
  .then( (results) => {
 let item = results; //see item below
    } )
    .catch( (err) => {
 let errorMsg = err;
    } );
    wixLocation.to(`/home`);
 
}

Any help appreciated !!
Thanks !!!

2

Hi,

In order to add the uploaded image to your data collection, you will have to add a few things to your code.

You will want to add some code that handles the upload on the image using the startUpload() function . This is where you can get the url of the image that is uploaded. **Please click on the hyperlink that’s linked the to startUpload() text above to see a great example on how to get the URL of the image that is uploaded.

After you are able to get the url of the image, you can add it to your toInsert object so that it looks something like:

let url;

$w("#myUploadButton").startUpload()
     .then( (uploadedFile) => {
       console.log("Upload successful. File is available here:");
       console.log(uploadedFile.url);
       url = uploadedFile.url
     } )
     
.....

let toInsert = {
 "name":        $w('#input1').value
 "image": url
}

...

The image should upload to the data collection once you call your function that is responsible for adding it to the data collection.
For information regarding adding data to a collection, click here.

Best regards,
Edward

3

Thanks Edward !
Very Helpful😃
Here’s my code –

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

export function button7_click(event) {
 if($w("#uploadButton1").value.length > 0) {
    $w('#text6').show();
    $w("#text6").text = "Uploading " + $w("#uploadButton1").value[0].name}
    $w("#uploadButton1").startUpload()
      .then( (uploadedFile) => {
        $w("#text6").text = "Upload successful";
        $w('#text6').hide();
        $w('#image1').show();
        $w('#button7').hide();
        $w('#input2').show();
        $w('#button6').show();
        $w("#image1").src = uploadedFile.url;
      })
      .catch( (uploadError) => {
        $w("#text6").text = "File upload error";
        console.log("File upload error: " + uploadError.errorCode);
        console.log(uploadError.errorDescription);
      });
  } 
 



export function button6_click(event) {
let toInsert = {
 "name":        $w('#input1').value,
 "foodPhoto" : $w("#image1").src,
 "description" : $w('#input2').value,
 "all" : "all"

};

wixData.insert("FoodItems", toInsert)
  .then( (results) => {
 let item = results; //see item below
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );
  wixLocation.to(`/home`);
 
}