Move DnD widget in a EntityBrowser Widget

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

@@ -0,0 +1,34 @@
+.dcx-dropzone {
+  width: 100%;
+  text-align: center;
+  margin: 1em 0;
+  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_dropzone_ui/dcx_dropzone_ui.info.yml

@@ -0,0 +1,10 @@
+name: DC-X Dropzone UI
+type: module
+description: 'Dropzone Element for DCX DnD'
+
+version: '0'
+core: '8.x'
+package: dcx
+
+dependencies:
+  - dcx_migration

modules/dcx_dropzone_ui/dcx_dropzone_ui.module

@@ -0,0 +1,41 @@
+<?php
+
+function dcx_dropzone_ui_theme() {
+  return [
+    'dcxdropzone' => [
+      'render element' => 'element',
+    ],
+  ];
+}
+
+/**
+ * Prepares variables for dropzone form element.
+ *
+ * Default template: dropzonejs.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - element: A render element representing the file.
+ */
+function template_preprocess_dcxdropzone(&$variables) {
+  $element = $variables['element'];
+
+  $variables['attributes'] = [];
+  if (isset($element['#id'])) {
+    $variables['attributes']['id'] = $element['#id'];
+  }
+  if (!empty($element['#attributes']['class'])) {
+    $variables['attributes']['class'] = (array) $element['#attributes']['class'];
+  }
+
+  $variables['attributes']['class'][] = 'dcx-dropzone';
+
+  if (isset($element['#dropzone_description'])) {
+    $variables['description'] = $element['#dropzone_description'];
+  }
+  else {
+    $variables['description'] = 'DC-X Dropzone';
+  }
+
+  $variables['dropvalue'] = $element['dropvalue'];
+}

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

@@ -0,0 +1,45 @@
+(function ($, Drupal, drupalSettings) {
+  "use strict";
+
+  Drupal.behaviors.dcxMigrationDropzone = {
+    attach: function (context, settings) {
+
+      var dropzone_id = drupalSettings.dcx_dropzone.dropzone_id,
+              dropzone = $('#' + dropzone_id);
+
+      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();
+
+        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' );
+        });
+      });
+    }
+  };
+
+})(jQuery, Drupal, drupalSettings);

modules/dcx_migration/src/Form/DcxImportForm.php → modules/dcx_dropzone_ui/src/Controller/UploadController.php

@@ -2,69 +2,63 @@
 
 /**
  * @file
- * Contains \Drupal\dcx_migration\Form\DcxImportForm.
+ * Contains \Drupal\dcx_dropzone_ui\Controller\UploadController.
  */
 
-namespace Drupal\dcx_migration\Form;
+namespace Drupal\dcx_dropzone_ui\Controller;
 
-use Drupal\Core\Form\FormBase;
-use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Controller\ControllerBase;
 use Drupal\dcx_migration\DcxImportServiceInterface;
-use Drupal\dcx_migration\Exception\AlreadyMigratedException;
 use Symfony\Component\DependencyInjection\ContainerInterface;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 
 /**
- * Class DcxImportForm.
- *
- * @package Drupal\dcx_migration\Form
+ * Handles requests that dropzone issues when uploading files.
  */
-class DcxImportForm extends FormBase {
+class UploadController extends ControllerBase {
 
   protected $importService;
 
   /**
-   * Constructor.
+   * 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) {
+  public function __construct(DcxImportServiceInterface $importService, Request $request) {
     $this->importService = $importService;
-  }
 
-  /**
-   * {@inheritdoc}
-   */
-  public static function create(ContainerInterface $container) {
-    return new static($container->get('dcx_migration.import'));
+    $this->request = $request;
   }
 
-
   /**
    * {@inheritdoc}
    */
-  public function getFormId() {
-    return 'dcx_import_form';
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('dcx_migration.import'),
+      $container->get('request_stack')->getCurrentRequest()
+    );
   }
 
   /**
-   * {@inheritdoc}
+   * Handles DropzoneJs uploads.
    */
-  public function buildForm(array $form, FormStateInterface $form_state) {
-    $form['dropzone'] = [
-      '#title' => t('DC-X Dropzone element'),
-      '#dropzone_description' => 'Custom description goes here.',
-      '#type' => 'dcxdropzone',
-    ];
-
-    return $form;
-  }
+  public function handleUploads() {
 
-  /**
-   * {@inheritdoc}
-   */
-  public function submitForm(array &$form, FormStateInterface $form_state) {
-    $data = $form_state->getValue('dropzone');
+    $data = $this->request->getContent();
 
     $ids = [];
     // Data might be a simple string, which is technically not JSON ... so
@@ -85,10 +79,14 @@ public function submitForm(array &$form, FormStateInterface $form_state) {
     }
 
     if (empty($ids)) {
-      return;
+      throw new NotFoundHttpException();
     }
 
     $this->importService->import($ids);
+
+    return new JsonResponse([], 200);
+
+
   }
 
 }

modules/dcx_migration/src/Element/DcxDropzone.php → modules/dcx_dropzone_ui/src/Element/DcxDropzone.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\dcx_migration\Element;
+namespace Drupal\dcx_dropzone_ui\Element;
 
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Render\Element\FormElement;
@@ -26,7 +26,7 @@ public function getInfo() {
       '#theme' => 'dcxdropzone',
       '#theme_wrappers' => ['form_element'],
       '#attached' => [
-        'library' => ['dcx_migration/dropzone']
+        'library' => ['dcx_dropzone_ui/dropzone']
       ],
       '#tree' => TRUE,
     ];

modules/dcx_dropzone_ui/templates/dcxdropzone.html.twig

@@ -0,0 +1,14 @@
+<div{{ attributes }}>
+
+  <div class="box__input">
+
+  {{description}}
+  </div>
+
+  <div class="box__uploading">Uploading&hellip;</div>
+  <div class="box__success">Done!</div>
+  <div class="box__error">Error! <span></span>.</div>
+</div>
+{{ dropvalue }}
+
+

modules/dcx_entity_browser/dcx_entity_browser.info.yml

@@ -0,0 +1,11 @@
+name: DC-X Entity Browser
+type: module
+description: 'Entity Browser integration for dcx'
+
+version: '0'
+core: '8.x'
+package: dcx
+
+dependencies:
+  - dcx_dropzone_ui
+  - entity_browser

modules/dcx_entity_browser/dcx_entity_browser.module

@@ -0,0 +1,11 @@
+<?php
+
+/**
+ * @param $form
+ */
+function dcx_entity_browser_form_entity_browser_media_entity_browser_form_alter(&$form) {
+
+  if (!empty($form['widget']['dropzone']['#type']) && $form['widget']['dropzone']['#type'] == 'dcxdropzone') {
+    $form['actions'] = [];
+  }
+}

modules/dcx_entity_browser/src/Plugin/EntityBrowser/Widget/DcxDropzoneWidget.php

@@ -0,0 +1,93 @@
+<?php
+
+/**
+ * Contains \Drupal\dcx_entity_browser\Plugin\EntityBrowser\Widget\DcxDropzoneWidget.
+ */
+
+namespace Drupal\dcx_entity_browser\Plugin\EntityBrowser\Widget;
+
+use Drupal\Component\Utility\Bytes;
+use Drupal\Component\Utility\NestedArray;
+use Drupal\Core\Entity\EntityManagerInterface;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Session\AccountProxyInterface;
+use Drupal\entity_browser\WidgetBase;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Symfony\Component\EventDispatcher\EventDispatcherInterface;
+
+/**
+ * Provides an Entity Browser widget that imports files from dcx.
+ *
+ * @EntityBrowserWidget(
+ *   id = "dcx_dropzone",
+ *   label = @Translation("DCX Dropzone"),
+ *   description = @Translation("Adds DCX Dropzone import integration.")
+ * )
+ */
+class DcxDropzoneWidget extends WidgetBase {
+
+
+  /**
+   * Current user service.
+   *
+   * @var \Drupal\Core\Session\AccountProxyInterface
+   */
+  protected $currentUser;
+
+  /**
+   * Constructs widget plugin.
+   *
+   * @param array $configuration
+   *   A configuration array containing information about the plugin instance.
+   * @param string $plugin_id
+   *   The plugin_id for the plugin instance.
+   * @param mixed $plugin_definition
+   *   The plugin implementation definition.
+   * @param \Symfony\Component\EventDispatcher\EventDispatcherInterface $event_dispatcher
+   *   Event dispatcher service.
+   * @param \Drupal\Core\Session\AccountProxyInterface $current_user
+   *   The current user service.
+   */
+  public function __construct(array $configuration, $plugin_id, $plugin_definition, EventDispatcherInterface $event_dispatcher, EntityManagerInterface $entity_manager, AccountProxyInterface $current_user) {
+    parent::__construct($configuration, $plugin_id, $plugin_definition, $event_dispatcher, $entity_manager);
+    $this->currentUser = $current_user;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
+    return new static(
+      $configuration,
+      $plugin_id,
+      $plugin_definition,
+      $container->get('event_dispatcher'),
+      $container->get('entity.manager'),
+      $container->get('current_user')
+    );
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function defaultConfiguration() {
+    return [
+      'dropzone_description' => t('Drop files here to upload them'),
+    ] + parent::defaultConfiguration();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getForm(array &$original_form, FormStateInterface $form_state, array $aditional_widget_parameters) {
+    $config = $this->getConfiguration();
+
+    $form['dropzone'] = [
+      '#title' => '',
+      '#dropzone_description' => $config['settings']['dropzone_description'],
+      '#type' => 'dcxdropzone',
+    ];
+
+    return $form;
+  }
+}