UploadButton Value property is not returning the selected file

Ask the community
,
1

I have a form where the users will upload an image file and submit.The form input fields are connected to a dataset. including the upload file input.
The upload file is not picking up the files see the image of value of change event in debug mode. It is the same even when it is not connected to dataset.
Please help fix this .
I need a feature similar to the click of the image icon of this forum.
I tried these https://support.wix.com/en/article/adding-and-setting-up-an-upload-button
https://support.wix.com/en/article/adding-a-file-upload-field-to-your-form
They are not helping .

1865×730 96.4 KB

2

Please share your code in a code block as stated in the Forum Guidelines.

3

Sorry Yisreal here code I was trying to update the MainImage field of the dataset.
The uploadImageButton when connected to the dataset is not uploading the file. Could be linked to the same issue
Found a issue in code and fixed replaced
let selectedFile = $w( “#UploadIMainImageButton” ).value with
let selectedFile = event.target.value
but the startUpload funciton is not uploading the file

export function UploadIMainImageButton_change(event) {
    $w('#SubmitButton').disable();
 //Beacuse everything is done manually some limits need to be set.
 let uploadedImageSizeLimit = 15728640; //15MB
 let selectedFile = event.target.value
    console.log("Selected file " );
 if (selectedFile[0].size <= uploadedImageSizeLimit){
        $w("#UploadIMainImageButton").startUpload()
              .then((uploadedFile) => {
                  $w('#MemberProductsDataset').setFieldValue("mainImage",uploadedFile);
                })
            .catch( (uploadError) => {
            console.log("File upload error: " + uploadError.errorCode);
            console.log(uploadError.errorDescription);
         } );
    }

}

I also have another Field “AdditionalImages” in the dataset to save multiple images. Just like in stores/products. Not sure how to go about it though. Any tutorials available?

4

How do you know that the upload button " is not picking up the files"? Add selectedFile to your console.log() so you can see what’s going on.

console.log("Selected file ", selectedFile );

Did you see the documentation on the UploadButton? It is all explained very clearly and in detail, including code samples.

5

Thanks a lot Yisrael . Here is code that worked for me

export async function UploadIMainImageButton_change(event) {
    $w('#FileUploadErrorText').hide();
    $w('#FileUploadErrorText').collapse();
    $w('#SubmitButton').disable();
 //Beacuse everything is done manually some limits need to be set.
 let uploadedImageSizeLimit = 15728640; //15MB
 let selectedFile = event.target.value
    console.log("Selected file " );
 if (selectedFile[0].size <= uploadedImageSizeLimit){
        $SelectedItem = $w.at(event.context);
 let uploadedFile = await $SelectedItem('#UploadIMainImageButton').startUpload()
                                .catch( (uploadError) => {
                                        console.log("File     upload error: " + uploadError.errorCode);
                                        console.log(uploadError.errorDescription);
                                        $SelectedItem('#FileUploadErrorText').show();
                                        $SelectedItem('#FileUploadErrorText').expand();
                                        $SelectedItem('#FileUploadErrorText').text = "Error Uploading the file. Please try again or save item and upload file again";
                                        $w('#SubmitButton').enable();
 return;
                                });
         console.log("url " + uploadedFile.url);
         console.log("title "+ uploadedFile.title);
         $SelectedItem('#MainImage').src = uploadedFile.url;
         $SelectedItem('#MainImage').show();//would have been hidden if there was no image item 
         $SelectedItem('#MainImage').expand();
         $w('#MemberProductsDataset').setFieldValue("mainImage",uploadedFile.url);  

        console.log("fieldvalue set ");
        $w('#SubmitButton').enable();
    } else {
        $SelectedItem('#FileUploadErrorText').show();
        $SelectedItem('#FileUploadErrorText').expand();
        $SelectedItem('#FileUploadErrorText').text = "Error : File too big Max allowed is 15MB";
    }

Was able to get one file upload to work . How can I upload files and save in the AddiitonalImage field of type MediaGallery in dataset?