[5.2] Media field: selectable folders

administrator/components/com_media/resources/scripts/components/breadcrumb/breadcrumb.vue

@@ -78,7 +78,10 @@ export default {
  {
  bubbles: true,
  cancelable: false,
- detail: {},
+ detail: {
+ type: 'dir',
+ path: destination.path,
+ },
  },
  ),
  );

administrator/components/com_media/resources/scripts/components/browser/items/directory.vue

@@ -51,6 +51,17 @@ export default {
  /* Handle the on preview double click event */
  onPreviewDblClick() {
  this.navigateTo(this.item.path);
+
+ window.parent.document.dispatchEvent(
+ new CustomEvent('onMediaFileSelected', {
+ bubbles: true,
+ cancelable: false,
+ detail: {
+ type: this.item.type,
+ path: this.item.path,
+ },
+ }),
+ );
  },
  /* Hide actions dropdown */
  hideActions() {

administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js

@@ -126,6 +126,7 @@ export default {
  bubbles: true,
  cancelable: false,
  detail: {
+ type: this.item.type,
  path: this.item.path,
  thumb: this.item.thumb,
  fileType: this.item.mime_type ? this.item.mime_type : false,
@@ -142,7 +143,10 @@ export default {
  new CustomEvent('onMediaFileSelected', {
  bubbles: true,
  cancelable: false,
- detail: {},
+ detail: {
+ type: this.item.type,
+ path: this.item.path,
+ },
  }),
  );
  }

administrator/components/com_media/resources/scripts/components/browser/table/row.vue

@@ -136,32 +136,31 @@ export default {
  * @param event
  */
  onClick(event) {
- const path = false;
  const data = {
- path,
+ path: this.item.path,
+ type: this.item.type,
  thumb: false,
  fileType: this.item.mime_type ? this.item.mime_type : false,
  extension: this.item.extension ? this.item.extension : false,
  };
 
  if (this.item.type === 'file') {
- data.path = this.item.path;
  data.thumb = this.item.thumb ? this.item.thumb : false;
  data.width = this.item.width ? this.item.width : 0;
  data.height = this.item.height ? this.item.height : 0;
-
- window.parent.document.dispatchEvent(
- new CustomEvent(
- 'onMediaFileSelected',
- {
- bubbles: true,
- cancelable: false,
- detail: data,
- },
- ),
- );
  }
 
+ window.parent.document.dispatchEvent(
+ new CustomEvent(
+ 'onMediaFileSelected',
+ {
+ bubbles: true,
+ cancelable: false,
+ detail: data,
+ },
+ ),
+ );
+
  // Handle clicks when the item was not selected
  if (!this.isSelected()) {
  // Unselect all other selected items,

administrator/components/com_media/resources/scripts/components/tree/drive.vue

@@ -77,6 +77,17 @@ export default {
  /* Handle the on drive click event */
  onDriveClick() {
  this.navigateTo(this.drive.root);
+
+ window.parent.document.dispatchEvent(
+ new CustomEvent('onMediaFileSelected', {
+ bubbles: true,
+ cancelable: false,
+ detail: {
+ type: 'dir',
+ path: this.drive.root,
+ },
+ }),
+ );
  },
  moveFocusToChildElement(nextRoot) {
  this.$refs[nextRoot].setFocusToFirstChild();

administrator/components/com_media/resources/scripts/components/tree/tree.vue

@@ -88,7 +88,10 @@ export default {
  {
  bubbles: true,
  cancelable: false,
- detail: {},
+ detail: {
+ type: item.type,
+ path: item.path,
+ },
  },
  ),
  );

administrator/language/en-GB/plg_editors_tinymce.ini

@@ -11,6 +11,7 @@ PLG_TINY_CORE_BUTTONS="CMS Content"
 PLG_TINY_DND_ADDITIONALDATA="Additional Data"
 PLG_TINY_DND_ALTTEXT="Image Description (Alt Text)"
 PLG_TINY_DND_EMPTY_ALT="No Description"
+PLG_TINY_DND_FILE_EXISTS_ERROR="File \"%s\" already exists."
 PLG_TINY_DND_LAZYLOADED="Image will be lazyloaded"
 PLG_TINY_ERR_CUSTOMCSSFILENOTPRESENT="The file name %s was entered in the TinyMCE Custom CSS field. This file could not be found in the default template folder. No styles are available."
 PLG_TINY_ERR_EDITORCSSFILENOTPRESENT="Could not find the file 'editor.css' in the template or templates/system folder. No styles are available."

build/media_source/plg_editors_tinymce/js/plugins/dragdrop/plugin.es6.js

@@ -26,9 +26,7 @@ function readFile(file, callback) {
 window.tinymce.PluginManager.add('jdragndrop', (editor) => {
  const registerOption = editor.options.register;
  registerOption('uploadUri', { processor: 'string' });
- registerOption('comMediaAdapter', { processor: 'string' });
  registerOption('parentUploadFolder', { processor: 'string' });
- registerOption('csrfToken', { processor: 'string' });
 
  // Reset the drop area border
  const dragleaveCallback = (e) => {
@@ -61,22 +59,23 @@ window.tinymce.PluginManager.add('jdragndrop', (editor) => {
  const settings = editor.options.get;
 
  Joomla.request({
- url: `${settings('uploadUri')}&path=${settings('comMediaAdapter')}${settings('parentUploadFolder')}`,
+ url: `${settings('uploadUri')}&path=${settings('parentUploadFolder')}`,
  method: 'POST',
  data: JSON.stringify({
- [settings('csrfToken')]: 1,
  name,
  content,
  parent: settings('parentUploadFolder'),
  }),
  headers: {
  'Content-Type': 'application/json',
  },
- onSuccess: (resp) => {
+ promise: true,
+ })
+ .then((resp) => {
  let response;
 
  try {
- response = JSON.parse(resp);
+ response = JSON.parse(resp.responseText);
  } catch (e) {
  editor.windowManager.alert(`${Joomla.Text._('ERROR')}: {${e}}`);
  }
@@ -145,9 +144,14 @@ window.tinymce.PluginManager.add('jdragndrop', (editor) => {
  onCancel: (api) => dialogClose(api),
  });
  }
- },
- onError: (xhr) => editor.windowManager.alert(`Error: ${xhr.statusText}`),
- });
+ })
+ .catch((xhr) => {
+ let message = `Error: ${xhr.statusText}`;
+ if (xhr.status === 409) {
+ message = Joomla.Text._('PLG_TINY_DND_FILE_EXISTS_ERROR').replace('%s', `${settings('parentUploadFolder')}/${name}`);
+ }
+ editor.windowManager.alert(message);
+ });
  }
 
  // Logic for the dropped file

build/media_source/system/js/fields/joomla-field-media.w-c.es6.js

@@ -39,12 +39,12 @@ class JoomlaFieldMedia extends HTMLElement {
  }
 
  static get observedAttributes() {
- return ['type', 'base-path', 'root-folder', 'url', 'modal-title', 'modal-width', 'modal-height', 'input', 'button-select', 'button-clear', 'preview', 'preview-width', 'preview-height'];
+ return ['base-path', 'root-folder', 'url', 'modal-title', 'modal-width', 'modal-height', 'input', 'button-select', 'button-clear', 'preview', 'preview-width', 'preview-height'];
  }
 
- get type() { return this.getAttribute('type'); }
+ get types() { return this.getAttribute('types') || ''; }
 
- set type(value) { this.setAttribute('type', value); }
+ set types(value) { this.setAttribute('types', value); }
 
  get basePath() { return this.getAttribute('base-path'); }
 
@@ -175,7 +175,13 @@ class JoomlaFieldMedia extends HTMLElement {
 
  async modalClose() {
  try {
- await Joomla.getMedia(Joomla.selectedMediaFile, this.inputElement, this);
+ const item = Joomla.selectedMediaFile;
+ if (item && item.type === 'dir') {
+ // Set directory path as value only when the field is configured to support of directories
+ this.setValue(this.types.includes('directories') ? item.path : '');
+ } else {
+ await Joomla.getMedia(item, this.inputElement, this);
+ }
  } catch (err) {
  Joomla.renderMessages({
  error: [Joomla.Text._('JLIB_APPLICATION_ERROR_SERVER')],

build/media_source/system/js/fields/joomla-media-select.w-c.es6.js

@@ -48,7 +48,7 @@ document.addEventListener('onMediaFileSelected', async (e) => {
  images, audios, videos, documents,
  } = supportedExtensions;
 
- if (Joomla.selectedMediaFile.path) {
+ if (Joomla.selectedMediaFile.path && Joomla.selectedMediaFile.type === 'file') {
  let type;
  if (images.includes(Joomla.selectedMediaFile.extension.toLowerCase())) {
  type = 'images';

layouts/joomla/form/field/media.php

@@ -40,7 +40,8 @@
  * @var integer $size The size text
  * @var string $value The value text
  * @var string $src The path and filename of the image
- * @var array $mediaTypes The supported media types for the Media Manager
+ * @var string $mediaTypes The ids of supported media types for the Media Manager
+ * @var array $mediaTypeNames The names of supported media types for the Media Manager
  * @var array $imagesExt The supported extensions for images
  * @var array $audiosExt The supported extensions for audios
  * @var array $videosExt The supported extensions for videos
@@ -155,7 +156,8 @@
 }
 
 ?>
-<joomla-field-media class="field-media-wrapper" type="image" <?php // @TODO add this attribute to the field in order to use it for all media types ?>
+<joomla-field-media class="field-media-wrapper"
+ types="<?php echo $this->escape(implode(',', $mediaTypeNames)); ?>"
  base-path="<?php echo $this->escape(Uri::root()); ?>"
  root-folder="<?php echo $this->escape(ComponentHelper::getParams('com_media')->get('file_path', 'images')); ?>"
  url="<?php echo $url; ?>"

libraries/src/Form/Field/MediaField.php

@@ -382,6 +382,9 @@ public function getLayoutData()
  array_map(
  function ($mediaType) use (&$types, &$imagesAllowedExt, &$audiosAllowedExt, &$videosAllowedExt, &$documentsAllowedExt, $imagesExt, $audiosExt, $videosExt, $documentsExt) {
  switch ($mediaType) {
+ case 'directories':
+ $types[] = '-1';
+ break;
  case 'images':
  $types[] = '0';
  $imagesAllowedExt = $imagesExt;
@@ -417,6 +420,7 @@ function ($mediaType) use (&$types, &$imagesAllowedExt, &$audiosAllowedExt, &$vi
  'previewHeight' => $this->previewHeight,
  'previewWidth' => $this->previewWidth,
  'mediaTypes' => implode(',', $types),
+ 'mediaTypeNames' => $mediaTypes,
  'imagesExt' => $imagesExt,
  'audiosExt' => $audiosExt,
  'videosExt' => $videosExt,

plugins/editors/tinymce/forms/setoptions.xml

@@ -85,9 +85,11 @@
 
  <field
  name="path"
- type="uploaddirs"
+ type="media"
  label="PLG_TINY_FIELD_CUSTOM_PATH_LABEL"
  showon="drag_drop:1"
+ preview="false"
+ types="directories"
  />
 
  <field

plugins/editors/tinymce/src/Field/UploaddirsField.php

@@ -24,6 +24,9 @@
  * @package Joomla.Plugin
  * @subpackage Editors.tinymce
  * @since 3.7.0
+ *
+ * @deprecated __DEPLOY_VERSION__ will be removed in 7.0
+ * Use Joomla\CMS\Form\Field\FolderlistField.
  */
 class UploaddirsField extends FolderlistField
 {
@@ -52,6 +55,11 @@ public function setup(\SimpleXMLElement $element, $value, $group = null)
  $this->recursive = true;
  $this->hideDefault = true;
 
+ @trigger_error(
+ __CLASS__ . ' is deprecated, use Joomla\CMS\Form\Field\FolderlistField instead. Will be removed in 7.0.',
+ \E_USER_DEPRECATED
+ );
+
  return $return;
  }
 

plugins/editors/tinymce/src/PluginTraits/DisplayTrait.php

@@ -15,6 +15,7 @@
 use Joomla\CMS\Layout\LayoutHelper;
 use Joomla\CMS\Session\Session;
 use Joomla\CMS\Uri\Uri;
+use Joomla\Component\Media\Administrator\Provider\ProviderManagerHelperTrait;
 use Joomla\Registry\Registry;
 
 // phpcs:disable PSR1.Files.SideEffects
@@ -324,22 +325,32 @@ public function display(string $name, string $content = '', array $attributes =
 
  if ($dragdrop && $user->authorise('core.create', 'com_media')) {
  $wa->useScript('plg_editors_tinymce.jdragndrop');
- $plugins[] = 'jdragndrop';
- $uploadUrl = Uri::base(true) . '/index.php?option=com_media&format=json&url=1&task=api.files';
+ $plugins[] = 'jdragndrop';
+ $uploadUrl = Uri::base(true) . '/index.php?option=com_media&format=json&url=1&task=api.files';
+ $uploadPath = $levelParams->get('path', '');
+
+ // Make sure the path is full, and contain the media adapter in it.
+ $mediaHelper = new class () {
+ use ProviderManagerHelperTrait;
+
+ public function prepareTinyMCEUploadPath(string $path): string
+ {
+ $result = $this->resolveAdapterAndPath($path);
+
+ return implode(':', $result);
+ }
+ };
 
  Text::script('PLG_TINY_ERR_UNSUPPORTEDBROWSER');
  Text::script('ERROR');
  Text::script('PLG_TINY_DND_ADDITIONALDATA');
  Text::script('PLG_TINY_DND_ALTTEXT');
  Text::script('PLG_TINY_DND_LAZYLOADED');
  Text::script('PLG_TINY_DND_EMPTY_ALT');
+ Text::script('PLG_TINY_DND_FILE_EXISTS_ERROR');
 
- $scriptOptions['parentUploadFolder'] = $levelParams->get('path', '');
- $scriptOptions['csrfToken'] = $csrf;
+ $scriptOptions['parentUploadFolder'] = $mediaHelper->prepareTinyMCEUploadPath($uploadPath);
  $scriptOptions['uploadUri'] = $uploadUrl;
-
- // @TODO have a way to select the adapter, similar to $levelParams->get('path', '');
- $scriptOptions['comMediaAdapter'] = 'local-images:';
  }
 
  // Convert pt to px in dropdown

plugins/fields/media/media.xml

@@ -25,11 +25,10 @@
  <fieldset name="basic">
  <field
  name="directory"
- type="folderlist"
+ type="media"
  label="PLG_FIELDS_MEDIA_PARAMS_DIRECTORY_LABEL"
- directory="images"
- hide_none="true"
- recursive="true"
+ preview="false"
+ types="directories"
  />
 
  <field

plugins/fields/media/params/media.xml

@@ -4,12 +4,10 @@
  <fieldset name="fieldparams">
  <field
  name="directory"
- type="folderlist"
+ type="media"
  label="PLG_FIELDS_MEDIA_PARAMS_DIRECTORY_LABEL"
- directory="images"
- hide_none="true"
- recursive="true"
- validate="options"
+ preview="false"
+ types="directories"
  />
 
  <field