Inquiry on Dropzone with Validation

Wappler General
#1

Hi, I have few inquiries pertaining Validation with Dropzone.

  1. When I apply Accept Validation, I can still select the unaccepted file type from window popup (when I click to upload) then there’ll be warning popup that says This file type is not allowed…
    2019-08-23
    I expected when I click to upload with Accept Validation on, I can only select accepted file types, the same behavior as when using normal file upload.

  2. When I apply Required Validation, I expect there’ll be validation message below the Dropzone the same as when I have the validation on normal file field. However in my case, there’s no invalid message shows up on invalid.

    2019-08-23%20(1)
    2019-08-23 (1).png1189×299 6.14 KB

I’m not sure if my setup was incorrect or that really how the thing works but I need to achieve what I expected as mentioned above. Thanks in advance.

#2

We are going to check this.
Please don’t post questions like this in the Docs category :slight_smile:

#3
#4

Hey thanks for the prompt response and sorry for posting this in the wrong category.

#5

Ok I just want to add another related issue:

When on form reset (dynamic event > reset behaviour), I’ll get following error message on dev console:

dropzone.js:214 Uncaught TypeError: Cannot read property 'thumb' of undefined
    at n.reset (dropzone.js:214)
    at n.reset (form.js:62)
    at n.reset (form.js:18)
    at Object.data.<computed> (BaseComponent.js:445)
    at parser.js:708
    at t (parser.js:458)
    at parser.js:449
    at Object.dmx.parse (parser.js:382)
    at HTMLButtonElement.<anonymous> (on.js:5)
    at HTMLButtonElement.n (appConnect.js:396)
#6

@patrick / @Teodor Any update on this issue of dynamic validations not firing for dropzone? Is there a workaround you guys can suggest if the fix will take long?

#7

We are working on it, the problem is that is won’t be easy to implement it in the form validation. The dropzone replaces the file element with a div with drop support, our form validation only works with html5 form elements. We managed to implement a lot of the validation rules directly in dropzone, we are looking for a way to better integrate it with the form validator.

btw. The error with the form reset was fixed in one of our last Wappler updates.

1 Like
#8

The accept validation is working well.
But apart from that, min files & max files both are not working. I tried using that instead of required, as it would have similar effect for my case.
Is that also something that is yet to be implemented?

EDIT: Min files is not working. Max does work. But if I have set limit to 10 files, and I select 15 files in the file picker, I get 5 back-to-back browser alerts with error message. This is not good. Any workaround? Or will have to wait for a fix?

#9

At this moment the following validation is working: accept, minsize, maxsize, maxtotalsize and maxfiles. The validation is done when files are added to the dropzone. There is no validation on form submit, this is something that is still under development. This is also the reason why the minfiles and required are missing, these validation should be done on form submit.

The alerts are indeed not very nice when adding multiple files at once, we are looking for a better solution for this. Probably showing the last error inside the dropzone component or below it.

I don’t have a workaround, I will send you a beta if I have updated the code so that you can test it before the release.

1 Like
#10

Hi @patrick since you’re working on file validation could you also check on server side validation for accepted file, because when we have server side accept file validation without addition of required validation, the form will not pass when there’s no input because it still requires a valid file type. The usage case is when we need optional upload with accept file validation. The validation works as expected on client side.

#11

@transcoderm which server model did you use? ASP, ASP.NET or PHP?

#12

Thanks… will be waiting.

#13

I use PHP

#14

As promised here an update with improved validation, please test.

dmxDropzone.zip (2.9 KB)

#15

I’ve tested and didn’t see expected improvement?

  1. No invalid message for required validation.
  2. When I select file which is not set on validation: accept, the file is not loaded into dropzone, but there’s no alert or validation message whatsoever.
#16

yes, already discovered there was a problem that it doesn’t show the validation message in a bootstrap 4 form, working on that now.

#17

roger :ok_hand::+1:

#18

New update, this time it also includes the css which also needed a small update for bootstrap 4 forms. It should now correctly prevent the submit when there is an error.

dmxDropzone.zip (3.7 KB)

#19

Ok tested. Now I get invalid message for accept: This file type is not allowed for upload.

But no invalid message for required yet?

#20

It should show the required message the moment you try tot submit the form. It requires also the form validator on the page.