Conditional posting with or without image

Ask the community
,
1

HI guys,
I have a page where i ca create newposts that are written in the database… you can add text and a picture, and it works quite fine as long as you indeed add a picture.
But if you want to only post some text, it won’t work until you select an image.

770×276 74.2 KB

The code i use is this:

export async function button3_click(event) {
 let numberOfLikes = 0
let toInsert = {
postCreatorId: $w('#dataset1').getCurrentItem()._id, //userprofile dataset
postCreatorImage: $w('#dataset1').getCurrentItem().profileImage,
postCreator: $w('#dataset1').getCurrentItem().fullName,  
post: $w('#dataset6').getCurrentItem().post,  //userposts write dataset
postTitle: $w('#dataset6').getCurrentItem().postTitle,
postImage: await uploadFile(),
_createdDate: $w('#dataset6').getCurrentItem()._createdDate,  
numberOfLikes : numberOfLikes,
numberOfComments : 0,
numberOfViews : 0,
numberOfShares: 0
}

wixData.insert("userPosts", toInsert)

.then( (results) => {
let item = results; 
console.log("OK")

 $w("#userPosts").refresh();
$w("#textBox1").value = " ";
$w("#input1").value= " ";
$w("#thumbImage").src = "";
$w('#button4').hide();

}) ; 
 
}

 function uploadFile(){
return $w('#uploadButton1').startUpload().then(r => r.url);
}

export function button4_click(event) {
 if($w("#uploadButton1").value.length > 0) {
        $w("#uploadButton1").startUpload()
      .then( (uploadedFile) => {
            $w("#thumbImage").src = uploadedFile.url;
          })
      .catch( (uploadError) => {
            console.log("File upload error: " + uploadError.errorCode);
        console.log(uploadError.errorDescription);
      });
  } 
 else {
      }

}

export function uploadButton1_change(event) {
 if($w('#uploadButton1').value.length > 0) {
   $w('#button4').show();
 
  }
 else {
      $w('#button4').hide();
     }
}

I am struggling to change the code so that IF i select an image, THEN it will handle the image adding functions (uploadbutton change, uploadfile, and button 4.click), OTHERWISE it will only add the text post (post and postTitle fields, but not postImage field).

Any advices?
Thank you in advance.

2

In your toInsert object, you have

postImage: await uploadFile(),

If you don’t have an image, then uploadFile() fails. You should leave this out of toInsert. or use

postImage: null,

What you can do is to upload the image when the image file is selected. See the Upload Preloader example to see how that’s done. When you click your #button3, you can check if you’ve successfully uploaded a file. If so, you can use that value in the toInsert. If no file was uploaded, then use null in the toInsert.

3

Thank you Yisrael, i am trying to set the IF check if I’ve successfully uploaded the image file but i guess i have to do some more tries… the example is quite interesting and i would eliminate the preview button!