I am trying to create a form on my site. I am wanting to have an upload button for people to be able to upload images. But I want to be able to have the photo they have just uploaded displayed underneath the upload button so they can see what they are submitting. But i cant seem to find a way to do this.
I would appreciate any help
Thank you
Zoe
HI Yes its possible i have done it here after some trial and error
Its linked to the on change event of each upload button once changed the image uploads and is stored as a temporary object file until my client hits submit button then its stored in data collection
Like this the faded picture is displayed as an example and then once changed that pictured fades out and is replaced with the clients photo then there’s a submit button that they submit all the photos to a data collection.
There’s 3 parts to each photos code so for example this is the front photos code all others are same just re named each element
put this in the onready section.
// Front Photo On ready Function
console.log("Front photo upload text length =" + " " + $w("#frontPhotouploadbutton").value.length + " " + "(No photo selected)");
$w("#frontPhotouploadbutton").fileType = "Image"; // File type selector
$w("#frontPhotouploadbutton").buttonLabel = "Upload front photo"; // "Button label text of button on load"
if( $w("#frontPhotoclient").hidden ) {
$w("#frontPhotoexample").show();
}
else {
$w("#frontPhotoexample").hide();}
put this in export section
// Front Photo Upload Button Function
export function frontPhotouploadbutton_change(event) {
console.log("front photo upload text length =" + " " + $w("#frontPhotouploadbutton").value.length + " " + "(photo selected)");
$w("#frontPhotouploadbutton").buttonLabel = "Uploading Please Wait...." //+ $w("#frontPhotouploadbutton").value[0].name; "If you want to add something more to it"
$w("#frontPhotouploadbutton").startUpload() // "Tells Wix to start the upload and hold it as object before submission"
.then( (uploadedFile) => {
$w("#frontPhotouploadbutton").style.backgroundColor = "#FA9869"
$w("#frontPhotoclient").show()
.then( ( ) => {
console.log("front client photo shown");
});
$w("#frontPhotoexample").hide("fade",fadeOption)
.then( ( ) => {
console.log("front example photo faded");
});
$w("#frontPhotoclient").fitMode = "fit"
$w("#frontPhotouploadbutton").buttonLabel = "Upload successful"; // "Button label once upload in complete"
$w("#frontPhotoclient").src = uploadedFile.url; // "Gets a Wix URL from .src file, doesnt appear to be a normal public URL"
//$w("#myCheckinsdataset").setFieldValue("frontImageUrl", uploadedFile.url) // This way creates a image in collection but as a WIX URL but you see an image
let src = $w("#frontPhotoclient").src;
let frontPhotopublicurlLink = "https://static.wixstatic.com/media/" + src.split("/")[3]; // Converts the WIX URL to a public URL
$w("#myCheckinsdataset").setFieldValue("frontImageUrl", frontPhotopublicurlLink) // This will upload the converted public URL to a URL field in collection.
console.log(frontPhotopublicurlLink); // Just a checker so we can see whats happening in the log.
})
.catch( (uploadError) => {
$w("#frontPhotouploadbutton").buttonLabel = "File upload error please try again";
$w("#frontErrortext").show();
$w('#frontErrortext').text = uploadError.errorDescription
console.log("File upload error: " + uploadError.errorCode);
console.log(uploadError.errorDescription);
});
}
This is then uploaded using this submit button code. notice the if statements that make sure theres a file uploaded if not returns specific error text
// Submit Button Function
export function submitCheckinbutton_click(event) {
if($w("#frontPhotouploadbutton").value.length < 1) {
$w("#validationMessagetext").text = "Front photo missing nice try though!!! hehe"
$w("#validationMessagetext").show("fade",fadeOption)
//.then( ( ) => {
//$w("#frontPhotogroup").scrollTo(scrollOption)
//console.log("Done with scroll");
//});
}
else if ($w("#backPhotouploadbutton").value.length < 1) {
$w("#validationMessagetext").show("puff",puffOption)
$w("#validationMessagetext").text = "Back photo missing nice try though!!! hehe";}
else if ($w("#leftSidephotouploadbutton").value.length < 1) {
$w("#validationMessagetext").show("spin",spinOption)
$w("#validationMessagetext").text = "Left side photo missing nice try though!!! hehe";}
else if ($w("#rightSidephotouploadbutton").value.length < 1) {
$w("#validationMessagetext").show("arc",arcOption)
$w("#validationMessagetext").text = "Right side photo missing nice try though!!! hehe";}
else {
$w('#myCheckinsdataset').setFieldValue('firstName', $w('#firstNametextbox').value);
$w('#myCheckinsdataset').setFieldValue('lastName', $w('#lastNametextbox').value);
$w('#myCheckinsdataset').setFieldValue('emailAddress', $w('#emailAddresstextbox').value);
$w('#myCheckinsdataset').setFieldValue('weightInKg', $w('#weightTextbox').value);
$w('#myCheckinsdataset').setFieldValue('fat', $w('#bodyFattextbox').value);
$w('#myCheckinsdataset').setFieldValue('phoneNumber', $w('#phoneNumberTextbox').value);
$w('#myCheckinsdataset').setFieldValue('howDidYouFeelThisWeek', $w('#commentsTextbox').value);
$w('#myCheckinsdataset').setFieldValue('frontPhoto', $w('#frontPhotoclient').src);
$w('#myCheckinsdataset').setFieldValue('backPhoto', $w('#backPhotoclient').src);
$w('#myCheckinsdataset').setFieldValue('leftSidePhoto', $w('#leftSidephotoclient').src);
$w('#myCheckinsdataset').setFieldValue('rightSidePhoto', $w('#rightSidephotoclient').src);
$w('#myCheckinsdataset').setFieldValue('video', $w('#videoClient').src);
$w('#myCheckinsdataset').save()
console.log("Data Entered")
wixLocation.to("/home");
}}
export function submitCheckinbutton_mouseOut(event) {
$w("#validationMessagetext").hide("fade",fadeOption)
}
Hope it helps
Dan