Even though this is not inherent to DropzoneJS, but rather to Drupal core Javascript + Chrome, I experienced it heavily when using FileBrowser + DropzoneJS.
The problem
Validation error is triggered when double-clicking on "Select entities", the message displayed is:
"At least one valid file should be uploaded.".
This is the case for the Chrome web-browser, Firefox seems to be fine.
Reproducing
You can easily reproduce this problem without killing your index-finger.
- Fire-up your Chrome
- Simply add a sleep(2) at the beginning of the DropzoneJsEbWidget::validate() function.
- Then click once on "Select entities" after dropping an image into your FileBrowser/Dropzone.
- Within the next two seconds click again on "Select entities".
- This should give you the validation error message "At least one valid file should be uploaded."
Solution
Use a two-sided extension to the form submission and validation constraints:
- using the lock service on the server side
- using javascript (e.g. jquery.form-submit-single) on the client side to ensure forms are submitted once, even while double-clicking in Chrome
References
- Drupal 7/8 related core issue: https://www.drupal.org/node/1705618#comment-8276127
- jQuery Form Double-Submit Prevention library: https://github.com/sun/jquery-form-submit-single
Comments
Comment #2
stefanos.petrakisComment #3
stefanos.petrakisA working patch coming up pretty soon
Comment #4
stefanos.petrakisAdding some client-side, double-click prevention code from https://github.com/sun/jquery-form-submit-single.
And some locking/logging during validation for the DropzoneJsEbWidget.
Thanks to @beutlerk for reporting and testing this.
Comment #5
stefanos.petrakisComment #6
stefanos.petrakisComment #7
l0keRe-rolling patch against latest dev.
Comment #8
grathbone commentedThe patch from #7 seems to cause an issue with switching tabs on the Entity Browser dialog. Clicking other tabs doesn't do anything at all.
Comment #9
sanchiz commentedRe-rolled for latest 1.x dev.
@grathbone, I have no issues with other Entity Browser tabs.
Comment #10
sanchiz commentedI seems that in previous patch I missed some files. Re-rolled once again.
Comment #11
hamrant commentedLooks like after drupal core update this patch not work anymore. I have used patch from #10 and all was fine. Now on my site drupal core is version 8.4.8 and dropzonejs same as before (1.0-alpha8), as result - form submit absolutely not working.
Quick investigation shows that `onFormSubmitSingle` function runs 2 times immediately: on first one it set current values and then prevent for submit
This issue can be related to jquery update in drupal core. anyway it's need some work here.
Comment #12
Nik3D commentedAdding 'context' selector where 'onFormSubmitSingle' is being called fixes issue mentioned in #11.
Comment #13
Nik3D commentedComment #15
Nik3D commentedIncorrect transliteration has been causing test fails lately.
Adding fix of incorrect transliteration in DropzoneJsUploadControllerTest.php file.
Comment #16
Nik3D commentedComment #17
daften commentedUpdate patch for dropzonejs 2.0.0-alpha4
Comment #18
daften commentedUpdate patch to include the js files again
Comment #19
Andrew Gorokhovets commentedUpdated patch to include the js files for the latest dev version.
Comment #20
purushotam.rai commentedQuick Question/Thought:
Why are we creating our own version of onFormSubmitSingle, while we already have provision for "Drupal.behaviors.formSingleSubmit" provided by core/drupal.form
Merely adding following piece of code can do our work.
Comment #21
saso.sotlar commentedUpdated patch from #19 so it could be used on D9.
Comment #22
Andrew Gorokhovets commentedPatch in #21 looks good for me.
Comment #23
berdirNeeds to be a merge request now. Not sure if the server side check is really needed, what's the benefit of that?
Comment #24
berdir