Issue #2566303 by Primsi: Disable the submit button on the eb widget until...

Issue #2566303 by Primsi: Disable the submit button on the eb widget until files are successfully uploaded

js/dropzone.integration.js

@@ -9,6 +9,8 @@
 (function ($, Drupal, drupalSettings) {
   "use strict";
 
+  Drupal.dropzonejsInstances = [];
+
   Drupal.behaviors.dropzonejsIntegraion = {
     attach: function(context) {
       Dropzone.autoDiscover = false;
@@ -24,6 +26,9 @@
       var instanceConfig = drupalSettings.dropzonejs.instances[selector.attr('id')];
       var dropzoneInstance = new Dropzone("#" + selector.attr("id"), $.extend({}, instanceConfig, config));
 
+      // Other modules might need instances.
+      Drupal.dropzonejsInstances.push(dropzoneInstance);
+
       // React on add file. Add only accepted files.
       dropzoneInstance.on("success", function(file, response) {
         var uploadedFilesElement = selector.siblings(':hidden');

modules/eb_widget/dropzonejs_eb_widget.libraries.yml

+common:
+  version: VERSION
+  js:
+    js/dropzonejs_eb_widget.common.js: {}
+  dependencies:
+    - dropzonejs/integration

modules/eb_widget/js/dropzonejs_eb_widget.common.js

+/**
+ * @file dropzonejs_eb_widget.common.js
+ *
+ * Bundles various dropzone eb widget behaviours.
+ */
+(function ($, Drupal, drupalSettings) {
+  "use strict";
+
+  Drupal.behaviors.dropzonejsEbWidgetCommon = {
+    attach: function(context) {
+      if (Drupal.dropzonejsInstances.length) {
+        for (var i = 0; i < Drupal.dropzonejsInstances.length; i++) {
+          var instance = Drupal.dropzonejsInstances[i];
+          var $form = $(Drupal.dropzonejsInstances[i].element).parents('form');
+
+          if (form.hasClass('dropzonejs-disable-submit')) {
+            var $submit = form.find('input.form-submit');
+            submit.attr("disabled", "true");
+
+            instance.on("queuecomplete", function () {
+              if (instance.getRejectedFiles().length == 0) {
+                submit.removeAttr("disabled");
+              }
+              else {
+                submit.attr("disabled", "true");
+              }
+            });
+
+            instance.on("removedfile", function (file) {
+              if (instance.getRejectedFiles().length == 0) {
+                submit.removeAttr("disabled");
+              }
+            });
+          }
+        }
+      }
+    }
+  };
+
+}(jQuery, Drupal, drupalSettings));

modules/eb_widget/src/Plugin/EntityBrowser/Widget/DropzoneJsEbWidget.php

@@ -104,6 +104,10 @@ class DropzoneJsEbWidget extends WidgetBase {
       '#extensions' => $config['settings']['extensions'],
     ];
 
+    // Disable the submit button until the upload sucesfully completed.
+    $form['#attached']['library'][] = 'dropzonejs_eb_widget/common';
+    $original_form['#attributes']['class'][] = 'dropzonejs-disable-submit';
+
     return $form;
   }