Added support of auto select functionality

js/dropzone.integration.js

@@ -14,6 +14,8 @@
   Drupal.behaviors.dropzonejsIntegraion = {
     attach: function (context) {
       Dropzone.autoDiscover = false;
+
+      // TODO: init functionality should support multiple drop zones on page
       var selector = $(".dropzone-enable");
       selector.addClass("dropzone");
       var input = selector.siblings('input');
@@ -24,9 +26,20 @@
         addRemoveLinks: false
       };
       var instanceConfig = drupalSettings.dropzonejs.instances[selector.attr('id')];
+
+      // if DropzoneJS instance is already registered on Element. There is no
+      // need to register it again.
+      if (selector.once('register-dropzonejs').length !== selector.length) {
+        return;
+      }
+
+      // If instance exists for configuration, but it's detached from element
+      // then destroy detached instance and create new instance.
       if (instanceConfig.instance !== undefined) {
         instanceConfig.instance.destroy();
       }
+
+      // Initialize DropzoneJS instance for element.
       var dropzoneInstance = new Dropzone("#" + selector.attr("id"), $.extend({}, instanceConfig, config));
 
       // Other modules might need instances.

modules/eb_widget/config/schema/dropzonejs_eb_widget.schema.yml

@@ -5,6 +5,9 @@ entity_browser.browser.widget.dropzonejs:
     submit_text:
       type: string
       label: 'Submit button text'
+    auto_select:
+      type: boolean
+      label: 'Automatically submit selection'
     upload_location:
       type: string
       label: 'Upload location'
@@ -28,6 +31,9 @@ entity_browser.browser.widget.dropzonejs_media_entity:
     submit_text:
       type: string
       label: 'Submit button text'
+    auto_select:
+      type: boolean
+      label: 'Automatically submit selection'
     upload_location:
       type: string
       label: 'Upload location'
@@ -51,6 +57,9 @@ entity_browser.browser.widget.dropzonejs_media_entity_inline_entity_form:
     submit_text:
       type: string
       label: 'Submit button text'
+    auto_select:
+      type: boolean
+      label: 'Automatically submit selection'
     upload_location:
       type: string
       label: 'Upload location'

modules/eb_widget/js/dropzonejs_eb_widget.common.js

@@ -29,7 +29,41 @@
               if (item.instance.getRejectedFiles().length == 0) {
                 $submit.removeAttr("disabled");
               }
+
+              // If there are no files in DropZone -> disable Button.
+              if (item.instance.getAcceptedFiles().length === 0) {
+                $submit.prop("disabled", true);
+              }
             });
+
+            if (drupalSettings.entity_browser_widget.auto_select) {
+              item.instance.on('queuecomplete', function () {
+                var dzInstance = item.instance;
+                var filesInQueue = dzInstance.getQueuedFiles();
+                var acceptedFiles;
+                var i;
+
+                if (filesInQueue.length === 0) {
+                  acceptedFiles = dzInstance.getAcceptedFiles();
+
+                  // Ensure that there are some files that should be submitted.
+                  if (acceptedFiles.length > 0 && dzInstance.getUploadingFiles().length === 0) {
+                    // First submit accepted files and clear them from list of
+                    // dropped files afterwards.
+                    jQuery(dzInstance.element)
+                      .parent()
+                      .siblings('[name="auto_select_handler"]')
+                      .trigger('auto_select_enity_browser_widget');
+
+                    // Remove accepted files -> because they are submitted.
+                    for (i = 0; i < acceptedFiles.length; i++) {
+                      dzInstance.removeFile(acceptedFiles[i]);
+                    }
+                  }
+                }
+              });
+            }
+
           }
         });
       }

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

@@ -4,6 +4,8 @@
 
 use Drupal\Component\Utility\Bytes;
 use Drupal\Component\Utility\NestedArray;
+use Drupal\Core\Ajax\AjaxResponse;
+use Drupal\Core\Ajax\InvokeCommand;
 use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Session\AccountProxyInterface;
@@ -20,7 +22,8 @@
  * @EntityBrowserWidget(
  *   id = "dropzonejs",
  *   label = @Translation("DropzoneJS"),
- *   description = @Translation("Adds DropzoneJS upload integration.")
+ *   description = @Translation("Adds DropzoneJS upload integration."),
+ *   autoSelect = TRUE
  * )
  */
 class DropzoneJsEbWidget extends WidgetBase {
@@ -138,6 +141,25 @@ public function getForm(array &$original_form, FormStateInterface $form_state, a
     $form['#attached']['library'][] = 'dropzonejs_eb_widget/common';
     $original_form['#attributes']['class'][] = 'dropzonejs-disable-submit';
 
+    // Add hidden element used to make execution of auto-select of form.
+    if ($config['settings']['auto_select']) {
+      $form['auto_select_handler'] = [
+        '#type' => 'hidden',
+        '#name' => 'auto_select_handler',
+        '#id' => 'auto_select_handler',
+        '#attributes' => ['id' => 'auto_select_handler'],
+        '#submit' => ['::submitForm'],
+        '#executes_submit_callback' => TRUE,
+        '#ajax' => [
+          'callback' => [get_class($this), 'handleAjaxCommand'],
+          'event' => 'auto_select_enity_browser_widget',
+          'progress' => [
+            'type' => 'fullscreen',
+          ],
+        ],
+      ];
+    }
+
     return $form;
   }
 
@@ -245,10 +267,23 @@ public function submit(array &$element, array &$form, FormStateInterface $form_s
       $files[] = $file;
     }
 
-    if (!empty(array_filter($files))) {
-      $this->selectEntities($files, $form_state);
-      $this->clearFormValues($element, $form_state);
+    $this->selectEntities($files, $form_state);
+    $this->clearFormValues($element, $form_state);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function selectEntities(array $entities, FormStateInterface $form_state) {
+    if (!empty(array_filter($entities))) {
+      $config = $this->getConfiguration();
+
+      if (!$config['settings']['auto_select']) {
+        parent::selectEntities($entities, $form_state);
+      }
     }
+
+    $form_state->set(['dropzonejs', 'added_entities'], $entities);
   }
 
   /**
@@ -367,4 +402,47 @@ public function __sleep() {
     return array_diff(parent::__sleep(), ['files']);
   }
 
+  /**
+   * Handling of automated submit of uploaded files.
+   *
+   * @param array $form
+   *   Form.
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   *   Form state.
+   *
+   * @return \Drupal\Core\Ajax\AjaxResponse
+   *   Returns ajax commands that will be executed in front-end.
+   */
+  public static function handleAjaxCommand(array $form, FormStateInterface $form_state) {
+    $ajax = new AjaxResponse();
+
+    if (($triggering_element = $form_state->getTriggeringElement()) && $triggering_element['#name'] === 'auto_select_handler') {
+      $entity_ids = [];
+
+      $added_entities = $form_state->get(['dropzonejs', 'added_entities']);
+      /** @var \Drupal\Core\Entity\EntityInterface $entity */
+      if (!empty($added_entities)) {
+        foreach ($added_entities as $entity) {
+          $entity_ids[] = $entity->getEntityTypeId() . ':' . $entity->id();
+        }
+      }
+
+      // Add command to clear list of uploaded files. It's important to set
+      // empty string value, in other case it will act as getter.
+      $ajax->addCommand(
+        new InvokeCommand('[data-drupal-selector="edit-upload-uploaded-files"]', 'val', [''])
+      );
+
+      // Add Invoke command to select uploaded entities.
+      $ajax->addCommand(
+        new InvokeCommand('.entities-list', 'trigger', [
+          'add-entities',
+          [$entity_ids],
+        ])
+      );
+    }
+
+    return $ajax;
+  }
+
 }

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

@@ -16,7 +16,8 @@
  * @EntityBrowserWidget(
  *   id = "dropzonejs_media_entity_inline_entity_form",
  *   label = @Translation("Media Entity DropzoneJS with edit"),
- *   description = @Translation("Adds DropzoneJS upload integration that saves Media entities and allows to edit them.")
+ *   description = @Translation("Adds DropzoneJS upload integration that saves Media entities and allows to edit them."),
+ *   autoSelect = FALSE
  * )
  */
 class InlineEntityFormMediaWidget extends MediaEntityDropzoneJsEbWidget {

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

@@ -24,7 +24,8 @@
  * @EntityBrowserWidget(
  *   id = "dropzonejs_media_entity",
  *   label = @Translation("Media Entity DropzoneJS"),
- *   description = @Translation("Adds DropzoneJS upload integration that saves Media entities.")
+ *   description = @Translation("Adds DropzoneJS upload integration that saves Media entities."),
+ *   autoSelect = TRUE
  * )
  */
 class MediaEntityDropzoneJsEbWidget extends DropzoneJsEbWidget {
@@ -190,10 +191,8 @@ public function submit(array &$element, array &$form, FormStateInterface $form_s
       $media_entity->save();
     }
 
-    if (!empty(array_filter($media_entities))) {
-      $this->selectEntities($media_entities, $form_state);
-      $this->clearFormValues($element, $form_state);
-    }
+    $this->selectEntities($media_entities, $form_state);
+    $this->clearFormValues($element, $form_state);
   }
 
 }