Uploading image in database via Corvid

Ask the community
,
1

Hi all,
I’ve been trying to create a “Post new entry” lightbox that enables the user to create a new post to the website wall…
my code is:

export function button2_click(event) {
 let toInsert = {
postCreatorId: $w('#dataset2').getCurrentItem()._id,
postCreatorImage: $w('#dataset2').getCurrentItem().profileImage,
postCreator: $w('#dataset2').getCurrentItem().fullName,  
post: $w('#dataset1').getCurrentItem().post,
postImage: $w('#uploadButton1').startUpload,
_createdDate: $w('#dataset1').getCurrentItem()._createdDate,  
numberOfLikes : "0"
}
wixData.insert("userPosts", toInsert)
.then( (results) => {
let item = results; 
console.log("OK")

dataset2 is the dataset that contains user infos, reading from the userProfile database
dataset1 is the dataset that contains all the elements of the post, writing to the userPosts database

instead of linkink the button2 to dataset1 with action ‘submit’, i use the code above, and everything is fine as long as it concerns the post and _createdDate fields. But I cannot find a way to sent the image i select (via uploadButton1) to the database.
I have also tried to use:

postImage: $w('#dataset1').getCurrentItem().postImage,

but the image is not added in the postImage field.
Anyone has a clue?
Thank you

2

I am still stuck at this problem. In the meanwhile i tried another approach using URLs, but it does not look to work either.
What i did is to detach the link of the image placeholder from the dataset, and use code to write the image url in the dataase.
In the ‘New Post’ lightbox i used:

if($w("#uploadButton1").value.length > 0) {
     $w("#uploadButton1").startUpload()
      .then( (uploadedFile) => {
         $w("#thumbImage").src = uploadedFile.url;
       })

to send the result of the uploadButton1 to the thumbImage placeholder image, and the thumbImage correctly dislays the image i have uploaded.
Then i use:

let toInsert = {
postCreatorId: $w('#dataset2').getCurrentItem()._id,
postCreatorImage: $w('#dataset2').getCurrentItem().profileImage,
postCreator: $w('#dataset2').getCurrentItem().fullName,  
post: $w('#dataset1').getCurrentItem().post,
postImageUrl: $w('#thumbImage').src, //this is the image placeholder
_createdDate: $w('#dataset1').getCurrentItem()._createdDate,  
numberOfLikes : "0"
}

wixData.insert("userPosts", toInsert)

to send all data to the database, included the image url.
The Database contains a field set as URL called postImageUrl
which is filled with this:

In the dynamic page where all posts appear (with relevant image)
i use this code:

$w.onReady( () => {
$w("#image1").src = ('#userPosts').postImageUrl;

where image1 is the image placeholder where i want to show the image of the post, and userPosts is the database.

It doesn’t seem to work, because image1 is filled with a blue placeholder not with the image corresponding to the URL saved in the database.

Anyone has a clue?

3

I didn’t read your second question, but as for your first see in blue :

function uploadFile(){
return $w('#uploadButton1').startUpload().then(r => r.url);
}
export async function button2_click(event) {
 let toInsert = {
//.....etc....
postImage: await uploadFile(),
//etc....

[FIXED]

4

Thank you so much J.D. it works perfectly!