uploadbutton

Ask the community
,
1

Hi,
although I am not new to coding in general, I am quite new to JavaScript and Velo. I have a problem with an uploadbutton, say #uploadbutton1, which sits on a custom form.
When the user does an upload, (at least) two errors can occur, and I want to catch them in the onChange event handler of the uploadbutton. I cope with the first error (“file too big”), but I run into problems with the second (“wrong file type”). When I execute the code and upload a file of the wrong type, I see that the uploadbutton turns red, but I don’t know how to notice that event through code. To my surprise, the valid-property of the uploadbutton is still true. So what other property changes due to the wrong file type?

I appreciate any suggestions, especially those that come without fancy things like JavaScript promises and such.

Malte

2

One might think that the validity . fileTypeNotAllowed - property of the uploadbutton does the job, but experiments show that this is not reliably the case.

3

Now I have made some crucial progress. It seems that the change-event-handler of the uploadbutton is a critical spot (or rather: time) to read out the validity . fileTypeNotAllowed - property. So my code is like this:

export function uploadButton1_change(event)  
     {console.log($w('#uploadButton1').validity.fileTypeNotAllowed)}

and the website visitor chooses a file of the wrong type, the message in the console is false, which is not what I expect, but if you put in a little time delay like this:

export function uploadButton1_change(event) 
      {setTimeout( () =>    
           console.log($w('#uploadButton1').validity.fileTypeNotAllowed),200)  }

and you choose a wrong file type, the answer is true, which is precisely what I want.