Client Side validation on File input field

Wappler General How To
1

This is probably just me being silly but…

I set up a file upload field that stores the file name and a text field value in my database, i have added client side validation to the input of

<input name="order_number_pop" id="order_number_pop" type="hidden" dmx-bind:value="query.invoice_locator" required="">
<input name="file_upload_pop[]" id="file_upload_pop" type="file" multiple="" data-rule-maxfiles="3" data-msg-maxfiles="Please select no more than 3 files." required="" data-rule-maxsize="10000000" data-msg-maxsize="Please select a file of no more than 10MB." class="form-control-file" accept=".png,.jpg,.gif">

When i import my form data through server connect to create my file upload parameters, the $_POST variables are added with server side validation the same as my client side, but i do not want to use the server side validation so i remove all the checkboxes in server connect, add my database connection step, my file upload step, a repeat with the correct expression, and a database insert step, and save my action.

When i go and test it, the file uploads, and it inserts what i want into my database all perfectly, but i can choose more than 3 files and the client side validation does not show an error, if i turn back on all the server side validation it works as it should, however I really do not want the server side, and rather the client side.

2

Within Wappler’s preview mode, this doesn’t seem to display an error. However I’m getting an error message in a browser:

image
(using your exact example)

3

Thanks Tom. Appreciate you testing this out for me. Wondering if you removed all the server side validation in server connect on the $_POST variable or if you left those on.

4

I’m afraid my testing was not that thorough. I simply inserted your code into a page - without any server side files at all.

5

No problem Tom. If you didn’t make a server connect step then the client side validation must be working. Strange. Will carry on testing

6

ok i do not know why just one of the .js files was very far down in the head section, I moved it to above the css files and now the client side validation is working.
The next question might need a @Teodor for some assistance too.

My file upload field has a data-rule-maxfiles rule added to it with a static value of 3, and with refreshing the query to the image table after submitting i can . ensure that in most cases the 3 works fine. However in a circumstance tike the client uploads 2 files in one step, then does a second upload of 3 files it still allows it.

What I would like to do is set the data-rule-maxfiles=“3-serverconnect1.data.query1.count()” so the max images left for upload will be the remainder. But this does not seem to allow dynamic data in this field, can anyone please confirm this for me please.