Create a photo upload form, fast.

Discussion Made by the community
,
1

We often use a photo upload form, in the past I would use the photo upload procedure in the form submitting this way:

if ($w("#uploadButton1").value.length > 0) { 
    $w("#uploadButton1").startUpload()
      .then( (uploadedFile) => {
       $w('#image31').src =  uploadedFile.url
      insert = {
 "title": $w('#input1').value,
 "image" :  uploadedFile.url
 }

This works well, but slows down the form submission process until the image upload process is complete, especially if there are some images to upload.

I would like to share with you the way in my opinion better.
As soon as the image is selected, the image upload process will take place, so that the user can continue the form process as the site does the upload work, and when the form is submitted, everything is ready.

export async function uploadButton1_change(event) {
 let file = $w('#uploadButton1').value;
 if (file.length > 0) {
 let response = await $w('#uploadButton1').startUpload($w('#uploadButton1').buttonLabel = 'loading...');
 if (response) {
            $w('#image31').src = response.url
            $w('#uploadButton1').buttonLabel = "Replace image"
        }
    }
}

Submitting the form can now be associated with the image itself

insert = {
  "title": $w('#input1').value,
  "image" :   $w('#image31').src,
    }
1 Like