Comunity Example: live input preview

Show and tell
,
1

This example uses Velo to show you a preview of what your content will look like.
Text showcase

External Media

Image showcase

External Media

Test it out your self:
https://joris-dev.editorx.io/video-example/upload

The code:


let defaultImage;

$w.onReady(function () {
 //get the date
 const date = new Date();
 const day = date.getDate();
 const month = date.getMonth() +1;
 const year = date.getFullYear();
    defaultImage = $w('#imageX6').src
    //show date in correct format 
    $w('#previewDate').text = month + "/" + day + "/" + year
});

export function titleInput_input(event) {
 let titleInput = $w('#titleInput').value
    $w('#previewTitle').text = titleInput 
}

export function discriptionInput_input(event) {
 let disInput = $w('#discriptionInput').value
    $w('#previewDis').text = disInput 
}

export function uploadButton1_change(event) {
 if ($w("#uploadButton1").value.length > 0) {
            $w("#videoBox1").show();
            $w('#imageX6').hide();

 // To prevent showing the previous image once a new one is uploaded
            $w("#imageX6").src="";
 
            $w("#uploadButton1").startUpload()
                .then((uploadedFile) => {
                    $w("#imageX6").src = uploadedFile.url;
                })
                .catch(err => {
                    console.log(err, "Something went wrong")
                })
                .finally(() => {
                    $w("#videoBox1").hide();
                    $w('#imageX6').show();
                })
        } else {
 // If the user clicks X on the upload button, reset the image to the default one 
            $w("#imageX6").src = defaultImage;
        } 
}