How to insert an image to a database with code?

Ask the community
,
1

I am trying to link up an upload button with a database so far all I have been able to do is insert the metadata of images to the database - “ProfileImages”. The database has two fields: “email” and “image”; the first is text the second is image. I have tried to insert the data to the database as I have done before with text - as shown below - but it is not working. Is what I am doing possible or does something else have to been done?

2

Heath has already given you the appropriate links that show you how the upload button works within Wix Corvid, especially the first one which gives you a code example too.

https://www.wix.com/corvid/reference/$w.UploadButton.html

Typical file upload scenario

$w('#myButton').onClick( () => {
  if ($w("#myUploadButton").value.length > 0) {  // user chose a file
    console.log(`Uploading '${$w("#myUploadButton").value[0].name}'`);
    $w("#myUploadButton").startUpload()
      .then( (uploadedFile) => {
        console.log("Upload successful. File is available here:");
        console.log(uploadedFile.url);
      } )
      .catch( (uploadError) => {
        console.log(`File upload error: ${uploadError.errorCode}`);
        console.log(uploadError.errorDescription);
      } );
  }
  else {  // user clicked button but didn't chose a file
    console.log("Please choose a file to upload.")
  }
} );

For more info about using the upload button with Wix Corvid and the process it takes, then look at this page here.

If you understand the process of the upload button, you will see that it does not actually submit it to any dataset, it gets the users chosen item and then uploads it to the upload button which returns a url of the uploaded file, of which you can gather yourself manually through the upload button.

If you are actually wanting to save the uploaded image to a specific dataset, then you will need to add a submit button to the form that contains your upload button and link the upload button to the appropriate field in your dataset.

If you want to do it through code still, then check out Shay (Wix) reply in this previous post about it which was made before the upload button could be connected to datasets.
https://www.wix.com/corvid/forum/community-feature-request/image-upload-button-won-t-link-to-database-collection

3

Thank you.

4

I am trying to upload an image to my database table and trying to put a reference to the user that created the insert to the table


import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixData from 'wix-data';
$w.onReady(function () {
 let image1;
    $w("#assetImage1").startUpload()
      .then( (uploadedFile) => {
        image1 = uploadedFile.url
	//image1=uploadedFile
      } )
      .catch( (uploadError) => {
        console.log(`File upload error: ${uploadError.errorCode}`);
        console.log(uploadError.errorDescription);
      } );
    $w('#submitAsset').onClick(function (){
 let assetName = $w('#assetName').value;
 let assetType = $w('#assetType').value;
 let assetLocation = $w('#assetLocation').value;
 let assetLink = $w('#assetLink').value;
 let assetPrice = $w('#assetPrice').value;
 let assetDescription = $w('#assetDescription').value;
 let assetImage1 = image1;
    wixUsers.currentUser
 let toInsert = {
 "title":   assetName ,
 "price":   assetPrice,
 "type":    assetType,
 "image1": assetImage1,
 "location": assetLocation,
 "link":assetLink,
 "description":assetDescription,
 "customer":wixUsers.currentUser,
        };
        wixData.insert("mydataset", toInsert)
            .then( (results) => {
 let item = results; //see item below
            } )
            .catch( (err) => {
 let errorMsg = err;
            } );

        })
 
});

Uncaught (in promise) ReferenceError: assetImage1 is not defined
+
this is the field in the database that should be the user reference column

{
  "loggedIn": true,
  "id": "someID",
  "role": "Admin"
}

but its not really a reference to the user that created the insert

5

You have 2 errors !

Firstly : UploadFile is an array, so you have to select which index is the one for your file :

 image1 = uploadedFile[0]

Secondly : url is not a key of the uploadFile object. You need to select :

 image1 = uploadedFile[0].fileUrl
6

A fantastic and easy to follow example of how to upload an image to database with code can be found here: https://youtu.be/_VCyKguxPQQ

7

Maximum size of item we can insert via this method must be 500kb.