Form Fields Input & File Upload Do Not Save Together in same DB

Ask the community
,
1

I am super new to coding web though I have basic understanding as I used to code in VB many eons ago so please bare with me.

So I have a form which has user inputs for name, email, and video description along with a checkbox for agreement, an upload button and submit. The general purpose is to allow people to submit videos to me.

Everything get’s saved to the database (dataset1) but the video file URL is saved as it’s own record. This leaves me unable to tell who uploaded which video. So here is the code I currently I currently have.

Any help would be tremendously appreciated as I have been reading, learning and trying to make this one thing work for two days and just not sure where i am going wrong.

809×160 14.3 KB

Upload button is named UploadButton1
Submit button is named button1

export function UploadButton1_change(event) {
let files = $w(“#UploadButton1”).value;

let fileName = files[0].name; // “mypic.jpg”
let fileSize = files[0].size; // 45941
$w(“#text21”).text = fileName
$w(“#agreecheckbox”).enable();

$w(‘#button1’).onClick( () => {
if ($w(“#UploadButton1”).value.length > 0) { // user chose a file
console.log(Uploading '${$w("#UploadButton1").value[0].name}');
$w(“#UploadButton1”).startUpload()
.then( (uploadedFile) => {
console.log(“Upload successful. File is available here:”);
console.log(uploadedFile.url);

    $w("#dataset1").setFieldValue("videourle", uploadedFile.url); 
       $w("#dataset1").save() 


  } ) 
  . **catch** ( (uploadError) => { 
    console.log(`File upload error: ${uploadError.errorCode}`); 
    console.log(uploadError.errorDescription); 
  } );

}
else { // user clicked button but didn’t chose a file
console.log(“Please choose a file to upload.”)
}
} );

2

I can only see the labels inside the Data Manager (and not the field names, which are different), but are you sure about this one (the …urle-part)

  $w("#dataset1").setFieldValue("videourle", uploadedFile.url);
3

Hi thanks for your reply, Yes, that is actually a typo but that is the actual form key field. I am sure all the fields are correct because it does save all the forms input values to the database on submit along with the upload file.

The only issue is the form field values get saved as one record and the upload file to another one by itself (a new line) as shown in my screenshot. Almost like the submit button is making two separate transactions for the same submission.

4

So it turns out it will actually work if I disconnect the field from the user input field and add the code specifically like this;

et files = $w(“#UploadButton1”).value;

// Form Input Fields
let idescription = $w(“#idescriptionbox”).value;
let iemailaddress = $w(“#iemailaddressbox”).value;
let ifullname = $w(“#ifullnamebox”).value;
let iuploadreason = $w(“#iuploadreason”).value

let fileName = files[0].name; // “mypic.jpg”
let fileSize = files[0].size; // 45941
$w(“#text21”).text = fileName;
$w(“#agreecheckbox”).enable();

$w(‘#button1’).onClick( () => {
if ($w(“#UploadButton1”).value.length > 0) { // user chose a file
console.log(Uploading '${$w("#UploadButton1").value[0].name}');
$w(“#UploadButton1”).startUpload()
.then( (uploadedFile) => {
console.log(“Upload successful. File is available here:”);
console.log(uploadedFile.url);

    $w("#dataset1").setFieldValue("videourle", uploadedFile.url); 
    $w("#dataset1").setFieldValue("dbfilename", fileName); 
    $w("#dataset1").setFieldValue("dbvideodescription", idescription); 
    $w("#dataset1").setFieldValue("dbemailaddress", iemailaddress); 
    $w("#dataset1").setFieldValue("dbfullname", ifullname); 
    $w("#dataset1").setFieldValue("dbuploadreason", iuploadreason); 

       $w("#dataset1").save()

// ==================================================

End Result

1130×188 24.8 KB