allow uploading images to CKEditor via drag and drop

CHANGELOG.md

@@ -8,6 +8,7 @@
 - CKEditor now requires Craft CMS 5.9 or later.
 - Added support for fullscreen mode. ([#399](https://github.com/craftcms/ckeditor/pull/399))
 - The link modal UI now reflects Craft’s native Link fields. ([#375](https://github.com/craftcms/ckeditor/pull/375))
+- Added support for drag-n-drop image uploading. ([#486](https://github.com/craftcms/ckeditor/pull/486))
 - Added the “Advanced Link Fields” setting to CKEditor configs. ([#375](https://github.com/craftcms/ckeditor/pull/375))
 - Added `craft\ckeditor\helpers\CkeditorConfig`. ([#363](https://github.com/craftcms/ckeditor/pull/363))
 - Added `craft\ckeditor\web\assets\BaseCkeditorPackageAsset::$namespace`. ([#363](https://github.com/craftcms/ckeditor/pull/363))

src/Field.php

@@ -41,6 +41,7 @@
 use craft\events\CancelableEvent;
 use craft\events\DuplicateNestedElementsEvent;
 use craft\helpers\ArrayHelper;
+use craft\helpers\Assets as AssetsHelper;
 use craft\helpers\Cp;
 use craft\helpers\Db;
 use craft\helpers\ElementHelper;
@@ -417,6 +418,18 @@ private static function adjustFieldValues(
      */
     public string|array|null $availableVolumes = '*';
 
+    /**
+     * @var string|null The default volume used to upload images into field via drag & drop mechanism
+     * @since 4.12.0
+     */
+    public string|null $defaultUploadLocationVolume = null;
+
+    /**
+     * @var string|null The default subpath used to upload images into field via drag & drop mechanism
+     * @since 4.12.0
+     */
+    public string|null $defaultUploadLocationSubpath = null;
+
     /**
      * @var string|array|null The transforms available when selecting an image.
      * @since 1.2.0
@@ -1082,6 +1095,7 @@ private function _inputHtml(mixed $value, ?ElementInterface $element, bool $stat
             ],
             'assetSources' => $this->_assetSources(),
             'assetSelectionCriteria' => $this->_assetSelectionCriteria(),
+            'assetUploadParams' => $this->_assetUploadParams(),
             'linkOptions' => $this->_linkOptions($element),
             'advancedLinkFields' => $this->_advancedLinkFields($ckeConfig),
             'table' => [
@@ -1834,9 +1848,42 @@ private function _assetSelectionCriteria(): array
         if ($this->showUnpermittedFiles) {
             $criteria['uploaderId'] = null;
         }
+
         return $criteria;
     }
 
+    /**
+     * Returns the asset drag & drop upload parameters.
+     *
+     * @return array
+     */
+    private function _assetUploadParams(): array
+    {
+        $params = [];
+
+        $params['siteId'] = Craft::$app->getSites()->getCurrentSite()->id;
+        $params['kind'] = 'image';
+
+        if ($this->defaultUploadLocationVolume) {
+            $volume = Craft::$app->getVolumes()->getVolumeByUid($this->defaultUploadLocationVolume);
+            if ($volume) {
+                $subpath = trim($this->defaultUploadLocationSubpath ?? '', '/');
+                [$subpath, $folder] = AssetsHelper::resolveSubpath($volume, $subpath);
+
+                // Ensure that the folder exists
+                if (!$folder) {
+                    $folder = Craft::$app->getAssets()->ensureFolderByFullPathAndVolume($subpath, $volume);
+                }
+
+                $params['volumeId'] = $volume->id;
+                $params['volumeType'] = $volume::class;
+                $params['folderId'] = $folder->id;
+            }
+        }
+
+        return $params;
+    }
+
     /**
      * Returns custom element sources keys for given element type.
      *

src/templates/_field-settings.twig

@@ -107,6 +107,41 @@
     showAllOption: volumeOptions|length ? true : false
   }) }}
 
+  {% embed '_includes/forms/field.twig' with {
+      id: 'default-upload-location',
+      label: 'Default Upload Location'|t('app'),
+      instructions: 'Where images should be stored when they are uploaded directly to the field via drag & drop.'|t('ckeditor'),
+  } %}
+    {% block input %}
+      {% import '_includes/forms.twig' as forms %}
+        <div class="flex flex-nowrap">
+          <div>
+            {{ forms.select({
+              id: "default-upload-location-volume",
+              name: "defaultUploadLocationVolume",
+              options: [
+                {
+                  label: 'None'|t('app'),
+                  value: '',
+                },
+                ...volumeOptions,
+              ],
+              value: field.defaultUploadLocationVolume,
+            }) }}
+          </div>
+          <div id="default-upload-location-subpath-container" class="flex-grow {{ not field.defaultUploadLocationVolume ? 'hidden' }}">
+            {{ forms.text({
+              class: 'ltr',
+              id: "default-upload-location-subpath",
+              name: "defaultUploadLocationSubpath",
+              value: field.defaultUploadLocationSubpath,
+              placeholder: "path/to/subfolder"|t('app'),
+            }) }}
+          </div>
+        </div>
+    {% endblock %}
+  {% endembed %}
+
   {{ forms.checkboxSelectField({
     id: 'availableTransforms',
     name: 'availableTransforms',
@@ -188,3 +223,20 @@
     }) }}
   {% endif %}
 </div>
+
+{% js %}
+(() => {
+  new Craft.AssetsFieldSettings(
+    null,
+    {{ 'availableVolumes'|namespaceInputId|json_encode|raw }},
+    {{ 'default-upload-location-volume'|namespaceInputId|json_encode|raw }},
+    null,
+  );
+
+  const $volumeSelect = $("#{{ 'default-upload-location-volume'|namespaceInputId }}");
+  const $subpathContainer = $("#{{ 'default-upload-location-subpath-container'|namespaceInputId }}");
+  $volumeSelect.on('change', () => {
+    $subpathContainer.toggleClass('hidden', !$volumeSelect.val());
+  });
+})();
+{% endjs %}

src/translations/en/ckeditor.php

@@ -51,6 +51,7 @@
     'This field doesn’t allow nested {type} entries.' => 'This field doesn’t allow nested {type} entries.',
     'Toolbar' => 'Toolbar',
     'View available settings' => 'View available settings',
+    'Where images should be stored when they are uploaded directly to the field via drag & drop.' => 'Where images should be stored when they are uploaded directly to the field via drag & drop.',
     'Whether entry types with icons should be shown as separate buttons in the toolbar.' => 'Whether entry types with icons should be shown as separate buttons in the toolbar.',
     'Who should see the “Source” button?' => 'Who should see the “Source” button?',
     'Words' => 'Words',