I’m using the below code to submit information into the database. Everything is working but the file itself. It appears to work but when I look in the database it shows an issue with the file (see attached picture). What am I missing?
Thanks for the help!
import wixData from 'wix-data';
import wixLocation from 'wix-location';
export function uploadButton3_change(event) {
let file = $w("#uploadButton3").value[0].name;
$w("#text26").text= String(file);
}
export function button1_click_1() {
let toInsert = {
"repeater_file1": $w("#uploadButton3").value,
"repeaterFile1Title": $w("#text26").text,
"repeater_date": $w("#datePicker1").value,
"repeater_title": $w("#inputTitle").value,
"repeater_description": $w("#textDescription").value,
};
wixData.insert("Announcements", toInsert)
.then(() => {
wixLocation.to("https://www.blank.com/announcements");
})
.catch( (err) => {
console.log(err);
} );
}
I think I understand what I’m missing I’m just not sure how to incorporate it into my existing code. I missing that actually file upload function, something like this:
Indeed you have not uploaded the file but you are just passing the value of the upload button. Try this:
import wixData from 'wix-data';
import wixLocation from 'wix-location';
export function uploadButton3_change(event) {
let file = $w("#uploadButton3").value[0].name;
$w("#text26").text= String(file);
}
export function button1_click_1() {
if($w("#uploadButton3").value.length > 0) { //run only if a document is uploaded
$w("#button1").disable();
$w("#button1").label = 'Please wait...';
$w("#uploadButton3").startUpload()
.then( (uploadedFile) => {
let fileLocation = uploadedFile.url;
insertData(fileLocation);
});
} else {
$w("#button1").label = 'Please upload file';
}
}
function insertData(fileLocation) {
let toInsert = {
"repeater_file1": fileLocation, //make sure that repeater_file1 is a document field in the database
"repeaterFile1Title": $w("#text26").text,
"repeater_date": $w("#datePicker1").value,
"repeater_title": $w("#inputTitle").value,
"repeater_description": $w("#textDescription").value,
};
wixData.insert("Announcements", toInsert) //name of the database
.then(() => {
wixLocation.to("https://www.blank.com/announcements"); //this is where your user will be redirected after the file upload so enter a proper URL
});
}
Shan, thanks for the response! Ok, so the code seems to be working for the most part. The file is now uploading correctly and is inserted into the database. I’m using this in a lightbox and the one issue I’m having now is it hangs on “Please wait…” and nothing ever happens. However if I manually close the lightbox and then refresh the page everything shows correctly.
@shantanukumar847 It hangs for several minutes. That’s when I finally just closed the lightbox did a page refresh and everything was there correctly. Here’s the exact code I’m using on the page (except for the wixLocation address, I modified that before copying the code over):
import wixData from 'wix-data';
import wixLocation from 'wix-location';
export function uploadButton3_change(event) {
let file = $w("#uploadButton3").value[0].name;
$w("#fileTitle3").text= String(file);
}
export function submitButton_click() {
if($w("#uploadButton3").value.length > 0) {
$w("#submitButton").disable();
$w("#submitButton").label = 'Please wait...';
$w("#uploadButton3").startUpload()
.then( (uploadedFile) => {
let fileLocation = uploadedFile.url;
insertData(fileLocation);
});
} else {
$w("#submitButton").label = 'Please upload file';
}
}
function insertData(fileLocation) {
let toInsert = {
"repeater_file1": fileLocation,
"repeaterFile1Title": $w("#fileTitle3").text,
"repeater_date": $w("#datePicker1").value,
"repeater_title": $w("#inputTitle").value,
"repeater_description": $w("#textDescription").value,
};
wixData.insert("Announcements", toInsert)
.then(() => {
wixLocation.to.to("https://www.website.com/announcements");
});
}
@shantanukumar847 I have one one more question. Sometimes they won’t need to submit any files, they’ll just submit a title and description in the form (this is something for a contributor to post announcements). With the current code it doesn’t allow you to submit without uploading a file. I removed the following code but it does nothing after clicking on the submit button.
@timstumbo Sorry! I sent my last comment before I was done typing! My question is about making the upload buttons non-required fields. Did you ever figure out how to do that?
@shantanukumar847 Hello, Shan! Would you be able to help fix the code below so that users who do not have an upload can successfully submit the form? Thanks!!!
export function clientUpload1_change(event) {
let file = $w("#clientUpload1").value[0].name;
$w("#fileTitle1").text= String(file);
}
export function clientUpload2_change(event) {
let file = $w("#clientUpload2").value[0].name;
$w("#fileTitle2").text= String(file);//Add your code for this event here:
}
export function buttonSubmitGo_click() {
if($w("#clientUpload1").value.length > 0) {
$w("#buttonSubmitGo").disable();
$w("#buttonSubmitGo").label = 'Please wait...';
$w("#clientUpload1").startUpload()
.then( (uploadedFile) => {
let fileLocation = uploadedFile.url;
insertData(fileLocation);
});
} else {
$w("#buttonSubmitGo").enable();
$w("#buttonSubmitGo").label = 'Submit';
}
}
function insertData(fileLocation) {
let toInsert = {
"clientUpload1": fileLocation,
"clientUpload2": fileLocation,
"clientId": $w("#clientId").value, //clientId,
"email": $w("#email").value, //userEmail,
"fullName": $w("#fullName").value,
"projectType": $w("#projectType").value,
"projectCategory": $w("#category").value,
"planType": $w("#planType").value,
"projectTitle": $w("#projectTitle").value,
"projectDetails": $w("#projectDetails").value,
"projectStatus": $w("#projectStatus").value
};
wixData.insert("Projects", toInsert)
.then(() => {
wixLocation.to("/success");
});
}
