Simple async function question

Ask the community
,
1

I am trying to wrap my head around promises and async functions.

I have an upload button and a submit button on a page…just to test this out. My coder is as below:

$w.onReady(function () {

//wait for submit button
$w("#submit").onClick( (event) => {

uploadImage()

})
});

async function uploadImage(){
 console.log("Running");
 const uploadedImage = await $w("#imageUpload").uploadFiles();
 console.log(uploadedImage);
}

Why wouldn’t this work? I just want the upload file piece to work for now so haven’t included the collection save code. Shouldn’t uploadedImage contain the returned array of the .uploadFiles() function?

Simon.

2

Could really use a little help here…please?

3

Did you follow the typical file upload scenario ? There are some sample code snippets in the uploadFiles() API . Did you actually upload any files using the upload button? What do you see in the console?

As for Promises, see the following:

4

Yisrael,

I have followed the typical upload scenario and have that working elsewhere…what I am doing here is trying to get my head around usning as async function to achieve the same thing, so this isn’t a full example. Using async for file upoloads is less well documented in the API docs.

I would have expected the console.log command to output the file location, given how I wrote the code, but it is showing “undefined” instead. I would have expected the fact that it has to await the outcome of the uploadFiles() function to mean that this isn’t a timing issue with the promise though.

Is it maybe that

const uploadedImage = await $w ( “#imageUpload” ). uploadFiles ();

is just not allowed?

5

Using await should be the same as getting the result in the .then() function of the Promise. Since you say this isn’t a full example, perhaps the rest of your code is causing the problem?

You say this works elsewhere using .then(). If you change it to await does it work, or does it also fail? Perhaps you are trying to upload invalid files?

6

I’m going to test this out myself and see what I get.

7

Here’s what I did:

$w("#uploadButton").fileType = "Image";
$w("#uploadButton").onChange( async (event) => {
   let files = event.target.value;
   if (files.length > 0) { // Site visitor chose files
      console.log("Uploading the following files:", files);
      let uploadedFiles = await $w("#uploadButton").uploadFiles();
      console.log(uploadedFiles);
   } else {
      console.log("Please choose a file to upload.")
   }
});

I used the upload button’s onChange() event to ensure that there was something there. Maybe that’s the difference?

Oh, and btw - the above code was in my page’s onReady().

8

There is no other code…it’s a test page with nothing else. Oddly, it’s working fine now…don’t know what I was doing wrong before but it may have been the wrong file type as you suggest.

Sorry for wasting your time, but thanks for the help.

9

Not a waste of time - no other way to learn. Glad you got it worked out.

10

Can Someone give an example on how to use the upload photo button
I want the user to:

  1. upload photo

  2. automatically upload it

  3. show preview in box

  4. then save form on submit.

685×603 19 KB

import wixData from 'wix-data';

$w.onReady(function () {


const files = $w("#uploadPhoto").value;
$w("#uploadPhoto").fileType = "Image"; // Site visitor can choose an image fileType
$w('#uploadPhoto').onChange(async (event) => {
  let files = event.target.value
  if(files.lenght > 0) {
      let uploadedFiles = await $w("#uploadPhoto").uploadFiles()
      console.log(uploadedFiles)

  } else { 
      console.log('Not Working uploadFiles')
  }
})

let toInsert = {

    "title": $w('#dropdownTitle').value,
    "firstName": $w('#firstName').value,
    "lastName": $w('#lastName').value,
    "email": $w('#email').value,
    "phone": $w('#phone').value,
    "company": $w('#company').value,
    "jobTitle": $w('#jobTitle').value,
    "image" : $w('#uploadedPhoto').src ,
    "birthday" : $w('#birthday')
    
};

wixData.insert("Contacts", toInsert)
    .then((results) => {
        let item = results; 
    })
    .catch((err) => {
        let errorMsg = err;
    });


})
11

How can I convert this to Async Function?

let photoURL
export function uploadPhoto_change(event) {
    const files = $w("#uploadPhoto").value;
    $w("#uploadPhoto").fileType = "Image";
    $w('#btnUpload').enable()
    $w('#btnUpload').onClick(() => {
        if (files.length > 0) { 
            
            $w("#uploadPhoto").uploadFiles()
                .then((uploadedFiles) => {
                    uploadedFiles.forEach(uploadedFile => {
                        photoURL = uploadedFile.fileUrl
                        $w("#preview").src = photoURL
                        $w("#preview").show();

                    })

                    $w("#txtMessage").text = "Upload successful.";
                    $w("#txtMessage").show;

                })
                .catch((uploadError) => {
                    $w("#txtMessage").text = "File upload error: " + uploadError.errorCode;

                });
        } else { // Site visitor clicked button but didn't choose any files
            $w("#txtMessage").text = "Please choose a file to upload."
            $w("#txtMessage").show
        }
    })
}