I’ve created a user form that will eventually be restricted to only specific users so that event details can be added on the go including images and downloadable content (i.e. event flyer).
Everything seems to be working pretty well but I want to have the user able to preview the content before submitting to the database. See the image below.
I’ve looked at a few different options (I got it working the way I wanted, kind of, thanks to some other forum posts and example codes) but I would like the uploaded image/s to be added to the database rather than the visitor uploads section of the media manager so that the user doesn’t run into any “No File To Upload” error messages.
Here’s the page code I have so far:
import wixLocation from 'wix-location';
import wixData from 'wix-data';
//Content previews
$w.onReady(function () {
$w("#eventsDataset").onReady(() => {
updateInfo();
});
})
$w.onReady(function () {
$w('#previewButton').onClick((event) => {
updateInfo();
})
});
function updateInfo() {
console.log('Refreshed Data');
if ($w('#eventTitleInput').value === '') {
$w('#eventTitle').text = 'Add an Event Title'
} else {
$w('#eventTitle').text = $w('#eventTitleInput').value;
}
if ($w('#eventDescriptionInput').value === '') {
$w('#eventDescription').text = 'Add an Event Description'
} else {
$w('#eventDescription').text = $w('#eventDescriptionInput').value;
}
if ($w('#facebookEventUrlInput').value === '') {} else {
$w('#infoButton').link = $w('#facebookEventUrlInput').value;
}
if ($w('#eventDateInput').value === '') {
$w('#datePicker1').value = Date()
} else {
$w('#datePicker1').value = $w('#eventDateInput').value;
}
if ($w('#eventLocationInput').value === '') {
$w('#eventLocation').text = 'Add an Event Location'
} else {
$w('#eventLocation').text = $w('#eventLocationInput').value;
}
}
//Image upload and previews
$w.onReady(function () {
$w("#eventFlyerImageUpload").onChange(() => {
if ($w("#eventFlyerImageUpload").value.length > 0) { // user chose a file
console.log(`Uploading '${$w("#eventFlyerImageUpload").value[0].name}'`);
$w('#fileUploadRenameError').hide();
$w("#eventFlyerImageUpload").startUpload()
.then((uploadedFile) => {
console.log("Upload successful. File is available here:");
console.log(uploadedFile.url);
$w('#getFlyerButton').onClick((event1) => {
let url = uploadedFile.url.split("/")[3];
let filename = 'Event Flyer Preview';
wixLocation.to(`https://static.wixstatic.com/media/${url}?dn=${filename}`);
})
wixData // need to use save/update method.
})
.then(() => {
console.log('done Save/Update')
})
.catch((uploadError) => {
console.log(`File upload error: ${uploadError.errorCode}`);
if (uploadError.errorDescription === 'No File To Upload') {
$w("#eventBannerImageUpload").reset();
$w('#fileUploadRenameError').show();
}
console.log(uploadError.errorDescription);
});
} else { // user clicked button but didn't chose a file
console.log("Please choose a file to upload.")
$w('#fileUploadRenameError').hide();
}
});
});
$w.onReady(function () {
$w("#eventBannerImageUpload").onChange(() => {
if ($w("#eventBannerImageUpload").value.length > 0) { // user chose a file
console.log(`Uploading '${$w("#eventBannerImageUpload").value[0].name}'`);
$w('#fileUploadRenameError').hide();
$w("#eventBannerImageUpload").startUpload()
.then((uploadedFile) => {
console.log("Upload successful. File is available here:");
console.log(uploadedFile.url);
$w('#previewButton').onClick((event) => {
$w('#bannerImage').src = uploadedFile.url;
})
wixData // need to use save/update method.
})
.then(() => {
console.log('done Save/Update')
})
.catch((uploadError) => {
console.log(`File upload error: ${uploadError.errorCode}`);
if (uploadError.errorDescription === 'No File To Upload') {
$w("#eventBannerImageUpload").reset();
$w('#fileUploadRenameError').show();
}
console.log(uploadError.errorDescription);
});
} else { // user clicked button but didn't chose a file
console.log("Please choose a file to upload.")
$w('#fileUploadRenameError').hide();
}
});
});
Any ideas?