typo3-typescript-sources 13.4.20

package/extensionmanager/upload-form.ts

@@ -0,0 +1,42 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+class UploadForm {
+  public expandedUploadFormClass: string = 'transformed';
+
+  public initializeEvents(): void {
+    // Show upload form
+    new RegularEvent('click', (event: Event, target: HTMLAnchorElement): void => {
+      const uploadForm = document.querySelector('.extension-upload-form') as HTMLElement;
+
+      event.preventDefault();
+      if (uploadForm.classList.contains(this.expandedUploadFormClass)) {
+        uploadForm.style.display = 'none';
+        uploadForm.classList.remove(this.expandedUploadFormClass);
+      } else {
+        uploadForm.style.display = '';
+        uploadForm.classList.add(this.expandedUploadFormClass);
+
+        new AjaxRequest(target.href).get().then(async (response: AjaxResponse): Promise<void> => {
+          uploadForm.querySelector('.t3js-upload-form-target').innerHTML = await response.resolve();
+        });
+      }
+    }).delegateTo(document, '.t3js-upload');
+  }
+}
+
+export default UploadForm;

package/filelist/browse-files.ts

@@ -0,0 +1,148 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { MessageUtility } from '@typo3/backend/utility/message-utility';
+import ElementBrowser from '@typo3/backend/element-browser';
+import NProgress from 'nprogress';
+import RegularEvent from '@typo3/core/event/regular-event';
+import Icons from '@typo3/backend/icons';
+import type { ActionEventDetails } from '@typo3/backend/multi-record-selection-action';
+import { FileListActionEvent, type FileListActionDetail, FileListActionSelector, FileListActionUtility } from '@typo3/filelist/file-list-actions';
+import InfoWindow from '@typo3/backend/info-window';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { ResourceInterface } from '@typo3/backend/resource/resource';
+
+class BrowseFiles {
+  constructor() {
+
+    new RegularEvent(FileListActionEvent.primary, (event: CustomEvent): void => {
+      event.preventDefault();
+      const detail: FileListActionDetail = event.detail;
+      detail.originalAction = FileListActionEvent.primary;
+      detail.action = FileListActionEvent.select;
+      document.dispatchEvent(new CustomEvent(FileListActionEvent.select, { detail: detail }));
+    }).bindTo(document);
+
+    new RegularEvent(FileListActionEvent.select, (event: CustomEvent): void => {
+      event.preventDefault();
+      const detail: FileListActionDetail = event.detail;
+      const resource = detail.resources[0];
+      if (resource.type === 'file') {
+        BrowseFiles.insertElement(resource.name, resource.uid, detail.originalAction === FileListActionEvent.primary);
+      }
+      if (resource.type === 'folder') {
+        this.loadContent(resource);
+      }
+    }).bindTo(document);
+
+    new RegularEvent(FileListActionEvent.show, (event: CustomEvent): void => {
+      event.preventDefault();
+      const detail: FileListActionDetail = event.detail;
+      const resource = detail.resources[0];
+      InfoWindow.showItem('_' + resource.type.toUpperCase(), resource.identifier);
+    }).bindTo(document);
+
+    // Handle import selection event, dispatched from MultiRecordSelection
+    new RegularEvent('multiRecordSelection:action:import', this.importSelection).bindTo(document);
+
+  }
+
+  public static insertElement(fileName: string, fileUid: number, close?: boolean): boolean {
+    return ElementBrowser.insertElement(
+      'sys_file',
+      String(fileUid),
+      fileName,
+      String(fileUid),
+      close,
+    );
+  }
+
+  private static handleNext(items: ResourceInterface[]): void {
+    if (items.length > 0) {
+      const item = items.pop();
+      BrowseFiles.insertElement(item.name, Number(item.uid));
+    }
+  }
+
+  private async loadContent(resource: ResourceInterface): Promise<void>
+  {
+    if (resource.type !== 'folder') {
+      return;
+    }
+    const contentsUrl = document.location.href + '&contentOnly=1&expandFolder=' + resource.identifier;
+    const response = await new AjaxRequest(contentsUrl).get();
+    const html = await response.resolve();
+    const contentContainer = document.querySelector('.element-browser-main-content .element-browser-body') as HTMLElement;
+    contentContainer.innerHTML = html;
+    const tree = document.querySelector('typo3-backend-component-filestorage-browser-tree');
+    if (tree) {
+      const treeNodeIdentifier = encodeURIComponent(resource.identifier);
+      // @todo Support loading the node via rootline, in case the node has not be loaded in the tree yet, see @typo3/backend/tree/tree-module-state
+      const node = tree.nodes.find((node) => node.identifier === treeNodeIdentifier);
+      if (node) {
+        await tree.expandNodeParents(node);
+        tree.selectNode(node, false);
+      }
+    }
+  }
+
+  private readonly importSelection = (event: CustomEvent): void => {
+    event.preventDefault();
+    const target: HTMLElement = event.target as HTMLElement;
+    const items: NodeListOf<HTMLInputElement> = (event.detail as ActionEventDetails).checkboxes;
+    if (!items.length) {
+      return;
+    }
+
+    const selectedItems: ResourceInterface[] = [];
+    items.forEach((checkbox: HTMLInputElement) => {
+      if (checkbox.checked) {
+        const element = checkbox.closest(FileListActionSelector.elementSelector) as HTMLInputElement;
+        const resource = FileListActionUtility.getResourceForElement(element);
+        if (resource.type === 'file' && resource.uid) {
+          selectedItems.unshift(resource);
+        }
+      }
+    });
+    if (!selectedItems.length) {
+      return;
+    }
+
+    Icons.getIcon('spinner-circle', Icons.sizes.small, null, null, Icons.markupIdentifiers.inline).then((icon: string): void => {
+      target.classList.add('disabled');
+      target.innerHTML = icon;
+    });
+    NProgress.configure({ parent: '.element-browser-main-content', showSpinner: false });
+    NProgress.start();
+    const stepping = 1 / selectedItems.length;
+    BrowseFiles.handleNext(selectedItems);
+
+    new RegularEvent('message', (event: MessageEvent): void => {
+      if (!MessageUtility.verifyOrigin(event.origin)) {
+        throw 'Denied message sent by ' + event.origin;
+      }
+
+      if (event.data.actionName === 'typo3:foreignRelation:inserted') {
+        if (selectedItems.length > 0) {
+          NProgress.inc(stepping);
+          BrowseFiles.handleNext(selectedItems);
+        } else {
+          NProgress.done();
+          ElementBrowser.focusOpenerAndClose();
+        }
+      }
+    }).bindTo(window);
+  };
+}
+
+export default new BrowseFiles();

package/filelist/browse-folders.ts

@@ -0,0 +1,94 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import ElementBrowser from '@typo3/backend/element-browser';
+import RegularEvent from '@typo3/core/event/regular-event';
+import type { ActionEventDetails } from '@typo3/backend/multi-record-selection-action';
+import { FileListActionEvent, type FileListActionDetail, FileListActionSelector, FileListActionUtility } from '@typo3/filelist/file-list-actions';
+import InfoWindow from '@typo3/backend/info-window';
+import type { ResourceInterface } from '@typo3/backend/resource/resource';
+
+/**
+ * Module: @typo3/backend/browse-folders
+ * Folder selection
+ * @exports @typo3/backend/browse-folders
+ */
+class BrowseFolders {
+  constructor() {
+
+    new RegularEvent(FileListActionEvent.primary, (event: CustomEvent): void => {
+      event.preventDefault();
+      const detail: FileListActionDetail = event.detail;
+      detail.originalAction = FileListActionEvent.primary;
+      detail.action = FileListActionEvent.select;
+      document.dispatchEvent(new CustomEvent(FileListActionEvent.select, { detail: detail }));
+    }).bindTo(document);
+
+    new RegularEvent(FileListActionEvent.select, (event: CustomEvent): void => {
+      event.preventDefault();
+      const detail: FileListActionDetail = event.detail;
+      const resource = detail.resources[0];
+      if (resource.type === 'folder') {
+        BrowseFolders.insertElement(resource.identifier, detail.originalAction === FileListActionEvent.primary);
+      }
+    }).bindTo(document);
+
+    new RegularEvent(FileListActionEvent.show, (event: CustomEvent): void => {
+      event.preventDefault();
+      const detail: FileListActionDetail = event.detail;
+      const resource = detail.resources[0];
+      InfoWindow.showItem('_' + resource.type.toUpperCase(), resource.identifier);
+    }).bindTo(document);
+
+    // Handle import selection event, dispatched from MultiRecordSelection
+    new RegularEvent('multiRecordSelection:action:import', this.importSelection).bindTo(document);
+
+  }
+
+  public static insertElement(identifier: string, close?: boolean): boolean {
+    return ElementBrowser.insertElement(
+      '',
+      identifier,
+      identifier,
+      identifier,
+      close,
+    );
+  }
+
+  private readonly importSelection = (event: CustomEvent): void => {
+    event.preventDefault();
+    const items: NodeListOf<HTMLInputElement> = (event.detail as ActionEventDetails).checkboxes;
+    if (!items.length) {
+      return;
+    }
+    const selectedItems: ResourceInterface[] = [];
+    items.forEach((checkbox: HTMLInputElement) => {
+      if (checkbox.checked) {
+        const element = checkbox.closest(FileListActionSelector.elementSelector) as HTMLInputElement;
+        const resource = FileListActionUtility.getResourceForElement(element);
+        if (resource.type === 'folder' && resource.identifier) {
+          selectedItems.unshift(resource);
+        }
+      }
+    });
+    if (!selectedItems.length) {
+      return;
+    }
+    selectedItems.forEach(function (resource: ResourceInterface) {
+      BrowseFolders.insertElement(resource.identifier);
+    });
+    ElementBrowser.focusOpenerAndClose();
+  };
+}
+
+export default new BrowseFolders();

package/filelist/context-menu-actions.ts

@@ -0,0 +1,335 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { lll } from '@typo3/core/lit-helper';
+import { SeverityEnum } from '@typo3/backend/enum/severity';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import Notification from '@typo3/backend/notification';
+import Modal from '@typo3/backend/modal';
+import Md5 from '@typo3/backend/hashing/md5';
+import { fileListOpenElementBrowser } from '@typo3/filelist/file-list';
+import { FileListActionEvent, type FileListActionDetail, FileListActionUtility } from './file-list-actions';
+
+/**
+ * Module: @typo3/filelist/context-menu-actions
+ *
+ * JavaScript to handle filelist actions from context menu
+ * @exports @typo3/filelist/context-menu-actions
+ */
+class ContextMenuActions {
+  public static getReturnUrl(): string {
+    return encodeURIComponent(top.list_frame.document.location.pathname + top.list_frame.document.location.search);
+  }
+
+  public static triggerFileDownload(downloadUrl: string, fileName: string, revokeObjectURL: boolean = false): void {
+    const anchorTag = document.createElement('a');
+    anchorTag.href = downloadUrl;
+    anchorTag.download = fileName;
+    document.body.appendChild(anchorTag);
+    anchorTag.click();
+    if (revokeObjectURL) {
+      URL.revokeObjectURL(downloadUrl);
+    }
+    document.body.removeChild(anchorTag);
+    // Add notification about successful preparation
+    Notification.success(lll('file_download.success'), '', 2);
+  }
+
+  public static renameFile(table: string, uid: string, dataset: DOMStringMap): void {
+    (async () => {
+      await import('@typo3/filelist/file-list-rename-handler');
+      const resource = FileListActionUtility.createResourceFromContextDataset(dataset);
+      const detail: FileListActionDetail = {
+        event: null,
+        trigger: null,
+        action: FileListActionEvent.rename,
+        resources: [resource],
+        url: null,
+        originalAction: null
+      };
+      document.dispatchEvent(new CustomEvent(FileListActionEvent.rename, { detail: detail }));
+    })();
+  }
+
+  public static replaceFile(table: string, uid: string, dataset: DOMStringMap): void {
+    const resource = FileListActionUtility.createResourceFromContextDataset(dataset);
+    const actionUrl: string = dataset.actionUrl;
+    top.TYPO3.Backend.ContentContainer.setUrl(
+      actionUrl + '&target=' + encodeURIComponent(resource.identifier) + '&uid=' + encodeURIComponent(resource.uid) + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
+    );
+  }
+
+  public static editFile(table: string, uid: string, dataset: DOMStringMap): void {
+    const actionUrl: string = dataset.actionUrl;
+    top.TYPO3.Backend.ContentContainer.setUrl(
+      actionUrl + '&target=' + encodeURIComponent(uid) + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
+    );
+  }
+
+  public static editMetadata(table: string, uid: string, dataset: DOMStringMap): void {
+    const resource = FileListActionUtility.createResourceFromContextDataset(dataset);
+    if (!resource.metaUid) {
+      return;
+    }
+    top.TYPO3.Backend.ContentContainer.setUrl(
+      top.TYPO3.settings.FormEngine.moduleUrl
+      + '&edit[sys_file_metadata][' + resource.metaUid + ']=edit'
+      + '&returnUrl=' + ContextMenuActions.getReturnUrl()
+    );
+  }
+
+  public static openInfoPopUp(table: string, uid: string): void {
+    if (table === 'sys_file_storage') {
+      top.TYPO3.InfoWindow.showItem(table, uid);
+    } else {
+      // Files and folders
+      top.TYPO3.InfoWindow.showItem('_FILE', uid);
+    }
+  }
+
+  public static uploadFile(table: string, uid: string, dataset: DOMStringMap): void {
+    const actionUrl: string = dataset.actionUrl;
+    top.TYPO3.Backend.ContentContainer.setUrl(
+      actionUrl + '&target=' + encodeURIComponent(uid) + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
+    );
+  }
+
+  public static createFolder(table: string, uid: string, dataset: DOMStringMap): void {
+    top.TYPO3.Backend.ContentContainer.get().document.dispatchEvent(new CustomEvent(fileListOpenElementBrowser, {
+      detail: {
+        actionUrl: dataset.actionUrl,
+        identifier: dataset.identifier,
+        mode: dataset.mode,
+      }
+    }));
+  }
+
+  public static createFile(table: string, uid: string, dataset: DOMStringMap): void {
+    const actionUrl: string = dataset.actionUrl;
+    top.TYPO3.Backend.ContentContainer.setUrl(
+      actionUrl + '&target=' + encodeURIComponent(uid) + '&returnUrl=' + ContextMenuActions.getReturnUrl(),
+    );
+  }
+
+  public static downloadFile(table: string, uid: string, dataset: DOMStringMap): void {
+    ContextMenuActions.triggerFileDownload(dataset.url, dataset.name);
+  }
+
+  public static downloadFolder(table: string, uid: string, dataset: DOMStringMap): void {
+    // Add notification about the download being prepared
+    Notification.info(lll('file_download.prepare'), '', 2);
+    const actionUrl: string = dataset.actionUrl;
+    (new AjaxRequest(actionUrl)).post({ items: [uid] })
+      .then(async (response): Promise<void> => {
+        let fileName = response.response.headers.get('Content-Disposition');
+        if (!fileName) {
+          const data = await response.resolve();
+          if (data.success === false && data.status) {
+            Notification.warning(lll('file_download.' + data.status), lll('file_download.' + data.status + '.message'), 10);
+          } else {
+            Notification.error(lll('file_download.error'));
+          }
+          return;
+        }
+        fileName = fileName.substring(fileName.indexOf(' filename=') + 10);
+        const data = await response.raw().arrayBuffer();
+        const blob = new Blob([data], { type: response.raw().headers.get('Content-Type') });
+        ContextMenuActions.triggerFileDownload(URL.createObjectURL(blob), fileName, true);
+      })
+      .catch(() => {
+        Notification.error(lll('file_download.error'));
+      });
+  }
+
+  public static createFilemount(table: string, uid: string): void {
+    if (uid.split(':').length !== 2) {
+      return;
+    }
+    top.TYPO3.Backend.ContentContainer.setUrl(
+      top.TYPO3.settings.FormEngine.moduleUrl
+      + '&edit[sys_filemounts][0]=new'
+      + '&defVals[sys_filemounts][identifier]=' + encodeURIComponent(uid)
+      + '&returnUrl=' + ContextMenuActions.getReturnUrl()
+    );
+  }
+
+  public static deleteFile(table: string, uid: string, dataset: DOMStringMap): void {
+    const performDelete = () => {
+      top.TYPO3.Backend.ContentContainer.setUrl(
+        top.TYPO3.settings.FileCommit.moduleUrl
+        + '&data[delete][0][data]=' + encodeURIComponent(uid)
+        + '&data[delete][0][redirect]=' + ContextMenuActions.getReturnUrl(),
+      );
+    };
+    if (!dataset.title) {
+      performDelete();
+      return;
+    }
+
+    const modal = Modal.confirm(
+      dataset.title,
+      dataset.message,
+      SeverityEnum.warning,
+      [
+        {
+          text: dataset.buttonCloseText || TYPO3.lang['button.cancel'] || 'Cancel',
+          active: true,
+          btnClass: 'btn-default',
+          name: 'cancel',
+        },
+        {
+          text: dataset.buttonOkText || TYPO3.lang['button.delete'] || 'Delete',
+          btnClass: 'btn-warning',
+          name: 'delete',
+        },
+      ]
+    );
+
+    modal.addEventListener('button.clicked', (e: Event): void => {
+      const element: HTMLInputElement = <HTMLInputElement>e.target;
+      if (element.name === 'delete') {
+        performDelete();
+      }
+      modal.hideModal();
+    });
+  }
+
+  public static copyFile(table: string, uid: string): void {
+    const md5 = Md5.hash(uid);
+    const url = TYPO3.settings.ajaxUrls.contextmenu_clipboard;
+    const queryArguments = {
+      CB: {
+        el: {
+          ['_FILE%7C' + md5]: uid
+        },
+        setCopyMode: '1'
+      }
+    };
+    (new AjaxRequest(url)).withQueryArguments(queryArguments).get().finally((): void => {
+      top.TYPO3.Backend.ContentContainer.refresh();
+    });
+  }
+
+  public static copyReleaseFile(table: string, uid: string): void {
+    const md5 = Md5.hash(uid);
+    const url = TYPO3.settings.ajaxUrls.contextmenu_clipboard;
+    const queryArguments = {
+      CB: {
+        el: {
+          ['_FILE%7C' + md5]: '0'
+        },
+        setCopyMode: '1'
+      }
+    };
+    (new AjaxRequest(url)).withQueryArguments(queryArguments).get().finally((): void => {
+      top.TYPO3.Backend.ContentContainer.refresh();
+    });
+  }
+
+  public static cutFile(table: string, uid: string): void {
+    const md5 = Md5.hash(uid);
+    const url = TYPO3.settings.ajaxUrls.contextmenu_clipboard;
+    const queryArguments = {
+      CB: {
+        el: {
+          ['_FILE%7C' + md5]: uid
+        }
+      }
+    };
+    (new AjaxRequest(url)).withQueryArguments(queryArguments).get().finally((): void => {
+      top.TYPO3.Backend.ContentContainer.refresh();
+    });
+  }
+
+  public static cutReleaseFile(table: string, uid: string): void {
+    const md5 = Md5.hash(uid);
+    const url = TYPO3.settings.ajaxUrls.contextmenu_clipboard;
+    const queryArguments = {
+      CB: {
+        el: {
+          ['_FILE%7C' + md5]: '0'
+        }
+      }
+    };
+    (new AjaxRequest(url)).withQueryArguments(queryArguments).get().finally((): void => {
+      top.TYPO3.Backend.ContentContainer.refresh();
+    });
+  }
+
+  public static pasteFileInto(table: string, uid: string, dataset: DOMStringMap): void {
+    const performPaste = (): void => {
+      top.TYPO3.Backend.ContentContainer.setUrl(
+        top.TYPO3.settings.FileCommit.moduleUrl
+        + '&CB[paste]=FILE|' + encodeURIComponent(uid)
+        + '&CB[pad]=normal&redirect=' + ContextMenuActions.getReturnUrl(),
+      );
+    };
+    if (!dataset.title) {
+      performPaste();
+      return;
+    }
+    const modal = Modal.confirm(
+      dataset.title,
+      dataset.message,
+      SeverityEnum.warning,
+      [
+        {
+          text: dataset.buttonCloseText || TYPO3.lang['button.cancel'] || 'Cancel',
+          active: true,
+          btnClass: 'btn-default',
+          name: 'cancel',
+        },
+        {
+          text: dataset.buttonOkText || TYPO3.lang['button.ok'] || 'OK',
+          btnClass: 'btn-warning',
+          name: 'ok',
+        },
+      ]
+    );
+
+    modal.addEventListener('button.clicked', (e: Event): void => {
+      const element: HTMLInputElement = <HTMLInputElement>e.target;
+      if (element.name === 'ok') {
+        performPaste();
+      }
+      modal.hideModal();
+    });
+  }
+
+  public static updateOnlineMedia(table: string, uid: string, dataset: DOMStringMap)
+  {
+    if (!dataset.actionUrl || !dataset.filecontextUid || dataset.filecontextType !== 'file') {
+      return;
+    }
+
+    const payload = {
+      resource: {
+        'type': dataset.filecontextType,
+        'uid': dataset.filecontextUid
+      }
+    };
+
+    (new AjaxRequest(dataset.actionUrl)).post(payload)
+      .then(() => {
+        Notification.success(lll('online_media.update.success'));
+      })
+      .catch(() => {
+        Notification.error(lll('online_media.update.error'));
+      })
+      .finally(() => {
+        window.location.reload();
+      });
+  }
+}
+
+export default ContextMenuActions;

package/filelist/create-folder.ts

@@ -0,0 +1,69 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import RegularEvent from '@typo3/core/event/regular-event';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { ResourceInterface } from '@typo3/backend/resource/resource';
+import { FileListActionEvent, type FileListActionDetail } from '@typo3/filelist/file-list-actions';
+import InfoWindow from '@typo3/backend/info-window';
+
+class CreateFolder {
+  constructor() {
+    new RegularEvent(FileListActionEvent.primary, (event: CustomEvent): void => {
+      event.preventDefault();
+      const detail: FileListActionDetail = event.detail;
+      detail.action = FileListActionEvent.select;
+      document.dispatchEvent(new CustomEvent(FileListActionEvent.select, { detail: detail }));
+    }).bindTo(document);
+
+    new RegularEvent(FileListActionEvent.select, (event: CustomEvent): void => {
+      event.preventDefault();
+      const detail: FileListActionDetail = event.detail;
+      const resource = detail.resources[0];
+      if (resource.type === 'folder') {
+        this.loadContent(resource);
+      }
+    }).bindTo(document);
+
+    new RegularEvent(FileListActionEvent.show, (event: CustomEvent): void => {
+      event.preventDefault();
+      const detail: FileListActionDetail = event.detail;
+      const resource = detail.resources[0];
+      InfoWindow.showItem('_' + resource.type.toUpperCase(), resource.identifier);
+    }).bindTo(document);
+  }
+
+  private async loadContent(resource: ResourceInterface): Promise<void>
+  {
+    if (resource.type !== 'folder') {
+      return;
+    }
+    const contentsUrl = document.location.href + '&contentOnly=1&expandFolder=' + resource.identifier;
+    const response = await new AjaxRequest(contentsUrl).get();
+    const html = await response.resolve();
+    const contentContainer = document.querySelector('.element-browser-main-content .element-browser-body') as HTMLElement;
+    contentContainer.innerHTML = html;
+    const tree = document.querySelector('typo3-backend-component-filestorage-browser-tree');
+    if (tree) {
+      const treeNodeIdentifier = encodeURIComponent(resource.identifier);
+      // @todo Support loading the node via rootline, in case the node has not be loaded in the tree yet, see @typo3/backend/tree/tree-module-state
+      const node = tree.nodes.find((node) => node.identifier === treeNodeIdentifier);
+      if (node) {
+        await tree.expandNodeParents(node);
+        tree.selectNode(node, false);
+      }
+    }
+  }
+}
+
+export default new CreateFolder();