allow uploading images to CKEditor via drag and drop

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 @@
      */
     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 @@
             ],
             'assetSources' => $this->_assetSources(),
             'assetSelectionCriteria' => $this->_assetSelectionCriteria(),
+            'assetUploadParams' => $this->_assetUploadParams(),
             'linkOptions' => $this->_linkOptions($element),
             'advancedLinkFields' => $this->_advancedLinkFields($ckeConfig),
             'table' => [
@@ -1834,9 +1848,40 @@
         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';
+
+        $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,35 @@
     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 mechanism.'|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: volumeOptions,
+              value: field.defaultUploadLocationVolume,
+            }) }}
+          </div>
+          <div class="flex-grow">
+            {{ 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 +217,12 @@
     }) }}
   {% endif %}
 </div>
+
+{% js %}
+    new Craft.AssetsFieldSettings(
+        null,
+        {{ 'availableVolumes'|namespaceInputId|json_encode|raw }},
+        {{ 'default-upload-location-volume'|namespaceInputId|json_encode|raw }},
+        null,
+    );
+{% 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 mechanism.' => 'Where images should be stored when they are uploaded directly to the field via drag & drop mechanism.',
     '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',