UploadButton strange behavior

Ask the community
,
1

Hi,
On testing the new code for the GuestPhoto-Gallery I recognized a strange behavior of the uploadButton functionality.
In the beginning I’ve separated the code for the two parts choose a file / upload the file. The upload was executed by a button with an onclick event.
Then I decided to integrate the function execution for the upload in the ChooseFile function. After that I got several times an error “no file to upload” although the filename was indicated at the UploadButton!

Did anybody have the same behavior? Have did you solve it? Or is there a bug in my code?

Here’s my code:

export function butChooseFile_change() {

if($w("#butChooseFile").value.length > 0) {
let files = $w('#butChooseFile').value;
if (files[0].size > 512000) {
$w("#textUpload").text = 'La taille du fichier est trop grande, choisissez un autre';
return;
}
$w('#ddYear').focus();
//      Here I've integrated the execution of the photoUpload()
photoUpload();
}
else {
$w("#textUpload").text = 'Choisissez une photo pour télécharger ...';
}
}
/*  Execution of the photoUpload() by clicking the Upload Button everything was ok with this execution
export function buttonUploadFile_click(event) {
photoUpload();
}
*/
//  The upload of the choosen photo
export async function photoUpload() {
$w("#textUpload").text = `Télécharger ${$w("#butChooseFile").value[0].name}`;
await $w("#butChooseFile").startUpload()
.then( (uploadedFile) => {
if (uploadedFile.width > 1400 || uploadedFile.height > 1050) {
$w("#textUpload").text = 'Le format de la photo n\'est pas valide, choisissez une autre';
dataComplete.image = false;
return;
}
$w("#textUpload").text = "Téléchargement terminé";
dataComplete.image = $w('#butChooseFile').valid;
imageUrl = uploadedFile.url;
$w('#imgProof').src = uploadedFile.url;
})
.catch( (uploadError) => {
console.log(uploadError.errorDescription);
});
}

Two important information:

  • My internet connection is based on satellite and is really slow
  • If I set a delay of 6 seconds before executing the photoUpload(), it works!

But it works also with the button, even if I click the uploadButton within a second!

Hope somebody can help!

2

So you are using the Wix Upload Button and you may have already read most of this!
https://www.wix.com/corvid/reference/$w.UploadButton.html#typical-scenario

So note that it works in two parts:
1 - gets the file to upload from the user;
2 - uploads the file.

Typical File Upload Scenario

In a typical scenario, the page from which files are uploaded contains an upload button and another element, such as a regular button. The user chooses which file to upload by clicking the upload button and selecting the file in a native file chooser dialog. At that point the file is stored in the upload button’s value property as a File object.

Then the user triggers an event, such as a button click, on the other element. That element’s event handler calls the startUpload() function to perform the actual upload. The upload either succeeds and gives you an UploadedFile object, or fails and gives you an UploadError object.

How do I use an upload button on my site?
The typical file upload scenario is a two-part process.
First your visitor chooses the file to upload and then they trigger the actual upload. This usually requires at least two page elements, an upload button element and a regular button. The site visitor chooses which file to upload by clicking the upload button and selecting the file in a native file chooser dialog. Then the visitor clicks the regular button to trigger some code that performs the upload.

How do I get information about files that are pending an upload?
Use value property to check the name and size of File objects waiting to be uploaded.

So, you need to keep the two parts seperate so that the upload button actually registers the file that the user has chosen and it has time to save that file in the upload button value property.

Then the user can press the other button to actually update the file to your website and then if you have a submit button on the page it will be saved into a dataset or you will have to use the save function in code.

You can see a example of working with the upload button and code here.
https://support.wix.com/en/article/wix-code-using-the-upload-button-with-code

Finally, as you state that your internet connection is slow and setting a setTimeout delay of 6 secs works for you, then it will because you are giving your code enough time so that the upload button can get the file to upload etc.