Move DnD widget in a EntityBrowser Widget

modules/dcx_integration_debug/dcx_integration_debug.module

@@ -1,16 +1,19 @@
 <?php
 
-function dcx_integration_form_dcx_import_form_alter(&$form) {
-  $form['draggables'] = [
-    '#theme' => 'item_list',
-    '#title' => 'Draggables for testing provided by dcx_integration_debug module.',
-    '#items' => [
-      ['#markup' => '<div class="item single">Single image</div>'],
-      ['#markup' => '<div class="item list">List of images</div>'],
-    ],
-    '#attributes' => ['class' => 'draggable']
-  ];
+function dcx_integration_debug_form_entity_browser_media_entity_browser_form_alter(&$form) {
+
+  if (!empty($form['widget']['dropzone']['#type']) && $form['widget']['dropzone']['#type'] == 'dcxdropzone') {
+    $form['draggables'] = [
+      '#theme' => 'item_list',
+      '#title' => 'Draggables for testing provided by dcx_integration_debug module.',
+      '#items' => [
+        ['#markup' => '<div class="item single">Single image</div>'],
+        ['#markup' => '<div class="item list">List of images</div>'],
+      ],
+      '#attributes' => ['class' => 'draggable']
+    ];
 
     $form['#attached']['library'][] = 'dcx_integration_debug/draggable';
+  }
 
 }

modules/dcx_migration/css/dcx-migration.dropzone.css

@@ -2,6 +2,33 @@
   width: 100%;
   text-align: center;
   margin: 1em 0;
-  padding: 2em;
-  border: 1px solid black;
+  padding: 1em;
+  height: 300px;
+  background-color: white;
+  outline: 2px dashed #0074bd;
+  outline-offset: -10px;
+  color: #004f80;
 }
+
+.dcx-dropzone.is-dragover {
+  background-color: #6b6b6b;
+}
+
+.box__dragndrop,
+.box__uploading,
+.box__success,
+.box__error {
+  display: none;
+}
+
+.box__input {
+  position: relative;
+  top: 50%;
+}
+
+.dcx-dropzone.is-uploading .box__input {
+  display: none;
+}
+.dcx-dropzone.is-uploading .box__uploading {
+  display: block;
+}

modules/dcx_migration/dcx_migration.module

@@ -50,3 +50,10 @@ function dcx_migration_media_delete(Drupal\Core\Entity\EntityInterface $entity)
     ->condition('destid1', $entity->id())
     ->execute();
 }
+
+function dcx_migration_form_entity_browser_media_entity_browser_form_alter(&$form) {
+
+  if (!empty($form['widget']['dropzone']['#type']) && $form['widget']['dropzone']['#type'] == 'dcxdropzone') {
+    $form['actions'] = [];
+  }
+}

modules/dcx_migration/dcx_migration.routing.yml

@@ -1,7 +1,7 @@
-dcx_migration.import:
-  path: 'dcx-migration/import'
+dcx_migration.upload:
+  path: '/dcx-migration/upload'
   defaults:
-    _form: '\Drupal\dcx_migration\Form\DcxImportForm'
-    _title: 'Import from DC-X'
+    _controller: '\Drupal\dcx_migration\Controller\UploadController::handleUploads'
   requirements:
-    _permission: 'import from dcx'
+    _permission: 'dcx import'
+    _method: 'POST'

modules/dcx_migration/js/dcx-migration.dropzone.js

@@ -5,19 +5,39 @@
     attach: function (context, settings) {
 
       var dropzone_id = drupalSettings.dcx_dropzone.dropzone_id,
-              value_name = drupalSettings.dcx_dropzone.value_name,
-              dropzone = $('#' + dropzone_id),
-              value_field = $('input[name="' + value_name + '"]')
+              dropzone = $('#' + dropzone_id);
 
-      dropzone.on('dragover', function (event) {
+      dropzone.on('dragover dragenter', function (event) {
         event.preventDefault();
+        dropzone.addClass('is-dragover');
+      });
+
+      dropzone.on('dragleave dragend drop', function (event) {
+        event.preventDefault();
+        dropzone.removeClass('is-dragover');
       });
 
       dropzone.on('drop', function (event) {
         event.preventDefault();
-        var data = event.originalEvent.dataTransfer.getData('text/uri-list');
-        value_field.val(data);
-        value_field.parents('form').submit();
+
+        if (dropzone.hasClass('is-uploading')) return false;
+
+        dropzone.addClass('is-uploading').removeClass('is-error');
+
+
+        var uri = decodeURIComponent(event.originalEvent.dataTransfer.getData('text/uri-list'));
+        var data = uri.split('?')[0];
+        data = [{'documenttype-image': data.substr(data.indexOf('document'))}];
+
+        $.ajax({
+          url: "/dcx-migration/upload",
+          method: 'POST',
+          data: JSON.stringify(data)
+        }).complete(function() {
+          dropzone.removeClass('is-uploading');
+        }).success(function(data) {
+          dropzone.addClass( data.success == true ? 'is-success' : 'is-error' );
+        });
       });
     }
   };

modules/dcx_migration/src/Controller/UploadController.php

@@ -0,0 +1,95 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\dropzonejs\Controller\UploadController.
+ */
+
+namespace Drupal\dcx_migration\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Drupal\dcx_migration\DcxImportServiceInterface;
+use Drupal\dropzonejs\UploadException;
+use Drupal\dropzonejs\UploadHandlerInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
+
+/**
+ * Handles requests that dropzone issues when uploading files.
+ */
+class UploadController extends ControllerBase {
+
+  protected $importService;
+
+  /**
+   * The current request.
+   *
+   * @var \Symfony\Component\HttpFoundation\Request $request
+   *   The HTTP request object.
+   */
+  protected $request;
+
+  /**
+   * Constructs dropzone upload controller route controller.
+   *
+   * @param \Drupal\dcx_migration\DcxImportServiceInterface $importService
+   *   The DCX Import Service actually processing the input.
+   * @param \Symfony\Component\HttpFoundation\Request $request
+   *   Request object.
+   */
+  public function __construct(DcxImportServiceInterface $importService, Request $request) {
+    $this->importService = $importService;
+
+    $this->request = $request;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('dcx_migration.import'),
+      $container->get('request_stack')->getCurrentRequest()
+    );
+  }
+
+  /**
+   * Handles DropzoneJs uploads.
+   */
+  public function handleUploads() {
+
+    $data = $this->request->getContent();
+
+    $ids = [];
+    // Data might be a simple string, which is technically not JSON ... so
+    // we need to check
+    $json = json_decode($data);
+
+    if ($json === NULL) { // decoding failed -> single item URL as string
+      preg_match('|dcx/(document/doc.*)\?|', $data, $matches);
+      if (!empty($matches)) {
+        $ids[] = "dcxapi:" .  $matches[1];
+      }
+    }
+    else { // decoding was successfull -> data is JSON -> data is multiple ids
+      $data = $json;
+      foreach($data as $val) {
+        $ids[] = "dcxapi:" .  current($val);
+      }
+    }
+
+    if (empty($ids)) {
+      return new JsonResponse([], 404);
+    }
+
+    $this->importService->import($ids);
+
+    return new JsonResponse([], 200);
+
+
+  }
+
+}