typo3-typescript-sources 14.3.7 → 14.3.9

package/backend/drag-uploader.ts

@@ -258,7 +258,7 @@ export default class DragUploader {
             if (node.matches('.t3js-drag-uploader')) {
               new DragUploader(node);
             } else {
-              node.querySelectorAll('.t3js-drag-uploader').forEach((element: HTMLElement): void => {
+              node.querySelectorAll<HTMLElement>('.t3js-drag-uploader').forEach((element): void => {
                 new DragUploader(element);
               });
             }
@@ -269,7 +269,7 @@ export default class DragUploader {
     observer.observe(document, { childList: true, subtree: true });
 
     DocumentService.ready().then((): void => {
-      document.querySelectorAll('.t3js-drag-uploader').forEach((element: HTMLElement): void => {
+      document.querySelectorAll<HTMLElement>('.t3js-drag-uploader').forEach((element): void => {
         new DragUploader(element);
       });
     });
@@ -371,7 +371,21 @@ export default class DragUploader {
    * @param {FileList} files
    */
   public processFiles(files: FileList): void {
-    this.queueLength = files.length;
+    const validFiles: File[] = [];
+    for (const file of Array.from(files)) {
+      const error = this.validateFile(file);
+      if (error === null) {
+        validFiles.push(file);
+      } else {
+        Notification.error(coreLabels.get('file_upload.notUploaded.title'), error);
+      }
+    }
+    this.fileInput.value = '';
+    if (validFiles.length === 0) {
+      return;
+    }
+
+    this.queueLength = validFiles.length;
 
     if (this.fileList.parentElement.hasAttribute('hidden')) {
       // Show the filelist (table)
@@ -385,11 +399,11 @@ export default class DragUploader {
     this.overallProgressBar = document.createElement('typo3-backend-progress-bar');
     document.body.appendChild(this.overallProgressBar);
     this.overallProgressBar.start();
-    this.percentagePerFile = 1 / files.length;
+    this.percentagePerFile = 1 / validFiles.length;
 
     // Check for each file if is already exist before adding it to the queue
     const ajaxCalls: Promise<void>[] = [];
-    Array.from(files).forEach((file: File) => {
+    validFiles.forEach((file) => {
       const request = new AjaxRequest(TYPO3.settings.ajaxUrls.file_exists).withQueryArguments({
         fileName: file.name,
         fileTarget: this.target,
@@ -418,8 +432,6 @@ export default class DragUploader {
         this.overallProgressBar.done();
       }
     });
-
-    this.fileInput.value = '';
   }
 
   public fileInDropzone = (): void => {
@@ -594,7 +606,7 @@ export default class DragUploader {
           this.askForOverride[index].action = <Action>select.value;
         }
       } else {
-        modal.querySelectorAll('.t3js-actions').forEach((select: HTMLSelectElement) => select.disabled = false);
+        modal.querySelectorAll<HTMLSelectElement>('.t3js-actions').forEach((select) => select.disabled = false);
       }
     }).delegateTo(modal, '.t3js-actions-all');
 
@@ -631,6 +643,37 @@ export default class DragUploader {
       document.dispatchEvent(new CustomEvent(uploadFinishedEventName));
     });
   }
+
+  /**
+   * @returns the reason why the file cannot be uploaded, null if it can be uploaded
+   */
+  private validateFile(file: File): string | null {
+    const extension = file.name.split('.').pop().toLowerCase();
+    if (this.maxFileSize > 0 && file.size > this.maxFileSize) {
+      return coreLabels.get('file_upload.maxFileSizeExceeded', {
+        '0': file.name,
+        '1': FormatUtility.fileSizeAsString(this.maxFileSize),
+      });
+    }
+    if (this.fileDenyPattern && file.name.match(this.fileDenyPattern)) {
+      return coreLabels.get('file_upload.fileNotAllowed', {
+        '0': file.name,
+      });
+    }
+    if (this.filesExtensionsAllowed && !this.filesExtensionsAllowed.split(',').includes(extension)) {
+      return coreLabels.get('file_upload.notUploaded.extensionExpected', {
+        '0': file.name,
+        '1': this.filesExtensionsAllowed.split(',').join(', '),
+      });
+    }
+    if (this.filesExtensionsDisallowed && this.filesExtensionsDisallowed.split(',').includes(extension)) {
+      return coreLabels.get('file_upload.notUploaded.extensionDisallowed', {
+        '0': file.name,
+        '1': extension,
+      });
+    }
+    return null;
+  }
 }
 
 class FileQueueItem {
@@ -697,72 +740,41 @@ class FileQueueItem {
     // set dummy file icon
     this.iconCol.innerHTML = '<typo3-backend-icon identifier="mimetypes-other-other" />';
 
-    // check file size
-    if (this.dragUploader.maxFileSize > 0 && this.file.size > this.dragUploader.maxFileSize) {
-      this.updateMessage(coreLabels.get('file_upload.maxFileSizeExceeded', {
-        '0': this.file.name,
-        '1': FormatUtility.fileSizeAsString(this.dragUploader.maxFileSize),
-      }));
-      this.progressBar.value = 100;
-      this.progressBar.severity = SeverityEnum.error;
-
-      // check filename/extension against deny pattern
-    } else if (this.dragUploader.fileDenyPattern && this.file.name.match(this.dragUploader.fileDenyPattern)) {
-      this.updateMessage(coreLabels.get('file_upload.fileNotAllowed', {
-        '0': this.file.name,
-      }));
-      this.progressBar.value = 100;
-      this.progressBar.severity = SeverityEnum.error;
-
-    } else if (this.isProhibitedByAllowedExtensionsList()) {
-      this.updateMessage(coreLabels.get('file_upload.fileExtensionExpected', {
-        '0': this.dragUploader.filesExtensionsAllowed,
-      }));
-      this.progressBar.value = 100;
-      this.progressBar.severity = SeverityEnum.error;
-    } else if (this.isProhibitedByDisallowedExtensionsList()) {
-      this.updateMessage(coreLabels.get('file_upload.fileExtensionDisallowed', {
-        '0': this.dragUploader.filesExtensionsDisallowed,
-      }));
-      this.progressBar.value = 100;
-      this.progressBar.severity = SeverityEnum.error;
-    } else {
-      this.updateMessage('- ' + FormatUtility.fileSizeAsString(this.file.size));
-
-      const formData = new FormData();
-      formData.append('data[upload][1][target]', this.dragUploader.target);
-      formData.append('data[upload][1][data]', '1');
-      formData.append('overwriteExistingFiles', this.override);
-      formData.append('redirect', '');
-      formData.append('upload_1', this.file);
-
-      // We use XMLHttpRequest as we need the `progress` event which isn't supported by fetch()
-      const xhr = new XMLHttpRequest();
-      xhr.onreadystatechange = (): void => {
-        if (xhr.readyState === XMLHttpRequest.DONE) {
-          if (xhr.status === 200) {
-            try {
-              const response = JSON.parse(xhr.responseText);
-              if (!response.hasErrors) {
-                this.uploadSuccess(response);
-              } else {
-                this.uploadError(xhr);
-              }
-            }
-            catch {
-              // In case JSON can not be parsed, the upload failed due to server errors,
-              // e.g. "POST Content-Length exceeds limit". Just handle as upload error.
+    this.updateMessage('- ' + FormatUtility.fileSizeAsString(this.file.size));
+
+    const formData = new FormData();
+    formData.append('data[upload][1][target]', this.dragUploader.target);
+    formData.append('data[upload][1][data]', '1');
+    formData.append('overwriteExistingFiles', this.override);
+    formData.append('redirect', '');
+    formData.append('upload_1', this.file);
+
+    // We use XMLHttpRequest as we need the `progress` event which isn't supported by fetch()
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = (): void => {
+      if (xhr.readyState === XMLHttpRequest.DONE) {
+        if (xhr.status === 200) {
+          try {
+            const response = JSON.parse(xhr.responseText);
+            if (!response.hasErrors) {
+              this.uploadSuccess(response);
+            } else {
               this.uploadError(xhr);
             }
-          } else {
+          }
+          catch {
+            // In case JSON can not be parsed, the upload failed due to server errors,
+            // e.g. "POST Content-Length exceeds limit". Just handle as upload error.
             this.uploadError(xhr);
           }
+        } else {
+          this.uploadError(xhr);
         }
-      };
-      xhr.upload.addEventListener('progress', (e: ProgressEvent) => this.updateProgress(e));
-      xhr.open('POST', TYPO3.settings.ajaxUrls.file_process);
-      xhr.send(formData);
-    }
+      }
+    };
+    xhr.upload.addEventListener('progress', (e: ProgressEvent) => this.updateProgress(e));
+    xhr.open('POST', TYPO3.settings.ajaxUrls.file_process);
+    xhr.send(formData);
   }
 
   /**
@@ -925,26 +937,6 @@ class FileQueueItem {
       this.row.append(document.createElement('td'));
     }
   }
-
-  public isProhibitedByAllowedExtensionsList(): boolean {
-    if (!this.dragUploader.filesExtensionsAllowed) {
-      return false;
-    }
-    const extension = this.file.name.split('.').pop();
-    const allowed = this.dragUploader.filesExtensionsAllowed.split(',');
-
-    return !allowed.includes(extension.toLowerCase());
-  }
-
-  public isProhibitedByDisallowedExtensionsList(): boolean {
-    if (!this.dragUploader.filesExtensionsDisallowed) {
-      return false;
-    }
-    const extension = this.file.name.split('.').pop();
-    const disallowed = this.dragUploader.filesExtensionsDisallowed.split(',');
-
-    return disallowed.includes(extension.toLowerCase());
-  }
 }
 
 DragUploader.init();

package/backend/element/draggable-resizable-element.ts

@@ -94,22 +94,22 @@ export class DraggableResizableElement extends LitElement {
 
   public override connectedCallback(): void {
     super.connectedCallback();
-    this.pointerEventNames.pointerDown.forEach((name: string): void =>
-      document.addEventListener(name, this.handleStart, true));
-    this.pointerEventNames.pointerMove.forEach((name: string): void =>
-      document.addEventListener(name, this.handleUpdate, true));
-    this.pointerEventNames.pointerUp.forEach((name: string): void =>
-      document.addEventListener(name, this.handleFinish, true));
+    this.pointerEventNames.pointerDown.forEach((name): void =>
+      document.addEventListener(name, this.handleStart as EventListener, true));
+    this.pointerEventNames.pointerMove.forEach((name): void =>
+      document.addEventListener(name, this.handleUpdate as EventListener, true));
+    this.pointerEventNames.pointerUp.forEach((name): void =>
+      document.addEventListener(name, this.handleFinish as EventListener, true));
   }
 
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
-    this.pointerEventNames.pointerDown.forEach((name: string): void =>
-      document.removeEventListener(name, this.handleStart, true));
-    this.pointerEventNames.pointerMove.forEach((name: string): void =>
-      document.removeEventListener(name, this.handleUpdate, true));
-    this.pointerEventNames.pointerUp.forEach((name: string): void =>
-      document.removeEventListener(name, this.handleFinish, true));
+    this.pointerEventNames.pointerDown.forEach((name): void =>
+      document.removeEventListener(name, this.handleStart as EventListener, true));
+    this.pointerEventNames.pointerMove.forEach((name): void =>
+      document.removeEventListener(name, this.handleUpdate as EventListener, true));
+    this.pointerEventNames.pointerUp.forEach((name): void =>
+      document.removeEventListener(name, this.handleFinish as EventListener, true));
   }
 
   protected override render(): TemplateResult {
@@ -246,4 +246,10 @@ declare global {
   interface HTMLElementTagNameMap {
     'typo3-backend-draggable-resizable': DraggableResizableElement;
   }
+
+  interface HTMLElementEventMap {
+    'draggable-resizable-started': DraggableResizableEvent;
+    'draggable-resizable-updated': DraggableResizableEvent;
+    'draggable-resizable-finished': DraggableResizableEvent;
+  }
 }

package/backend/element/icon-element.ts

@@ -48,10 +48,10 @@ export class IconElement extends LitElement {
   @property({ type: String }) raw?: string = null;
 
   private readonly iconTask = new Task(this, {
-    task: async ([identifier, size, overlay, state, markup]: [string, Sizes, States, string, MarkupIdentifiers], { signal }): Promise<string> => {
+    task: async ([identifier, size, overlay, state, markup], { signal }): Promise<string> => {
       return await Icons.getIcon(identifier, size, overlay, state, markup, signal);
     },
-    args: () => [this.identifier, this.size, this.overlay, this.state, this.markup]
+    args: () => [this.identifier, this.size, this.overlay, this.state, this.markup] as const
   });
 
   protected override render(): TemplateResult | symbol {

package/backend/element/thumbnail-element.ts

@@ -34,7 +34,7 @@ export class ThumbnailElement extends LitElement {
   @property({ type: Number, reflect: true }) height: number;
 
   private readonly thumbnailTask = new Task(this, {
-    task: async ([url, size, keepAspectRatio, width, height]: [string, ThumbnailSizeType, boolean, number, number]): Promise<TemplateResult> => {
+    task: async ([url, size, keepAspectRatio, width, height]): Promise<TemplateResult> => {
       const thumbnailUrl = new URL(url, window.origin);
       thumbnailUrl.searchParams.set('size', size);
       thumbnailUrl.searchParams.set('keepAspectRatio', keepAspectRatio ? '1' : '0');
@@ -60,7 +60,7 @@ export class ThumbnailElement extends LitElement {
       }));
       return html`${img}`;
     },
-    args: () => [this.url, this.size, this.keepAspectRatio, this.width, this.height]
+    args: () => [this.url, this.size, this.keepAspectRatio, this.width, this.height] as const
   });
 
   protected override createRenderRoot(): HTMLElement | ShadowRoot {

package/backend/element-browser.ts

@@ -79,7 +79,7 @@ class ElementBrowser {
     const isInModalFrame = typeof window.frames !== 'undefined'
       && typeof window.frames.frameElement !== 'undefined'
       && window.frames.frameElement.classList.contains('t3js-modal-iframe');
-    const otherModalFrames = Array.from(top.frames || []).filter((item: Window) => {
+    const otherModalFrames = Array.from(top.frames || []).filter((item) => {
       try {
         return typeof item.frameElement !== 'undefined'
           && item.frameElement.classList.contains('t3js-modal-iframe')

package/backend/event/consumer-scope.ts

@@ -33,14 +33,14 @@ class ConsumerScope {
 
   public detach(consumer: Consumable): void {
     this.consumers = this.consumers.filter(
-      (currentConsumer: Consumable) => currentConsumer !== consumer,
+      (currentConsumer) => currentConsumer !== consumer,
     );
   }
 
   public async invoke(request: InteractionRequest): Promise<void> {
     const promises: Promise<void>[] = [];
     this.consumers.forEach(
-      (consumer: Consumable) => {
+      (consumer) => {
         const promise: Promise<void> = consumer.consume.call(consumer, request);
         if (promise) {
           promises.push(promise);

package/backend/event/interaction-request-assignment.ts

@@ -20,5 +20,5 @@ export interface PromiseControls<T> {
 
 export interface InteractionRequestAssignment {
   request: InteractionRequest;
-  deferreds: PromiseControls<unknown>[];
+  deferreds: PromiseControls<never>[];
 }

package/backend/event/interaction-request-map.ts

@@ -17,7 +17,7 @@ import type { InteractionRequestAssignment, PromiseControls } from './interactio
 class InteractionRequestMap {
   private assignments: InteractionRequestAssignment[] = [];
 
-  public attachFor(request: InteractionRequest, deferred: PromiseControls<unknown>): void {
+  public attachFor(request: InteractionRequest, deferred: PromiseControls<never>): void {
     let targetAssignment: InteractionRequestAssignment = this.getFor(request);
     if (targetAssignment === null) {
       targetAssignment = { request, deferreds: [] };
@@ -29,14 +29,14 @@ class InteractionRequestMap {
   public detachFor(request: InteractionRequest): void {
     const targetAssignment = this.getFor(request);
     this.assignments = this.assignments.filter(
-      (assignment: InteractionRequestAssignment) => assignment === targetAssignment,
+      (assignment) => assignment === targetAssignment,
     );
   }
 
   public getFor(triggerEvent: InteractionRequest): InteractionRequestAssignment | null {
     let targetAssignment: InteractionRequestAssignment = null;
     this.assignments.some(
-      (assignment: InteractionRequestAssignment) => {
+      (assignment) => {
         if (assignment.request === triggerEvent) {
           targetAssignment = assignment;
           return true;

package/backend/form-engine/container/flex-form-container-container.ts

@@ -135,7 +135,7 @@ class FlexFormContainerContainer {
   }
 
   private registerPanelToggle(): void {
-    ['hide.bs.collapse', 'show.bs.collapse'].forEach((eventName: string): void => {
+    ['hide.bs.collapse', 'show.bs.collapse'].forEach((eventName): void => {
       new RegularEvent(eventName, (e: Event): void => {
         if (e.target !== this.containerContent) {
           return;
@@ -147,7 +147,7 @@ class FlexFormContainerContainer {
   }
 
   private registerPreviewUpdate(): void {
-    ['input', 'change'].forEach((eventName: string): void => {
+    ['input', 'change'].forEach((eventName): void => {
       new RegularEvent(eventName, (): void => {
         this.generatePreview();
       }).delegateTo(this.containerContent, 'input[type="text"], textarea');

package/backend/form-engine/container/flex-form-section-container.ts

@@ -98,7 +98,7 @@ class FlexFormSectionContainer {
 
   private readonly updateSorting = (e: Sortable.SortableEvent): void => {
     const actionFields: NodeListOf<HTMLInputElement> = this.container.querySelectorAll(Selectors.actionFieldSelector);
-    actionFields.forEach((element: HTMLInputElement, key: number): void => {
+    actionFields.forEach((element, key): void => {
       element.value = key.toString();
     });
 

package/backend/form-engine/container/inline-control-container.ts

@@ -161,7 +161,7 @@ class InlineControlContainer extends HTMLElement {
   }
 
   private static getValuesFromHashMap(hashmap: UniqueDefinitionCollection): Array<any> {
-    return Object.keys(hashmap).map((key: string) => hashmap[key]);
+    return Object.keys(hashmap).map((key) => hashmap[key]);
   }
 
   private static selectOptionValueExists(selectElement: HTMLSelectElement, value: string): boolean {
@@ -449,10 +449,10 @@ class InlineControlContainer extends HTMLElement {
    * @param {string} afterUid
    */
   private async importRecord(params: Array<any>, afterUid?: string): Promise<void> {
-    return this.ajaxDispatcher.send(
+    return this.ajaxDispatcher.send<InlineResponseInterface>(
       this.ajaxDispatcher.newRequest(this.ajaxDispatcher.getEndpoint(this.endpoints.create)),
       params,
-    ).then(async (response: InlineResponseInterface): Promise<void> => {
+    ).then(async (response): Promise<void> => {
       if (this.isBelowMax()) {
         this.createRecord(
           response.compilerInput.uid,
@@ -553,10 +553,10 @@ class InlineControlContainer extends HTMLElement {
         return;
       }
 
-      this.ajaxDispatcher.send(
+      this.ajaxDispatcher.send<InlineResponseInterface>(
         this.ajaxDispatcher.newRequest(this.ajaxDispatcher.getEndpoint(this.endpoints.synchronizelocalize)),
         [this.objectGroup, targetElement.dataset.type],
-      ).then(async (response: InlineResponseInterface): Promise<void> => {
+      ).then(async (response): Promise<void> => {
         this.recordsContainer.insertAdjacentHTML('beforeend', response.data);
 
         const objectIdPrefix = this.objectGroup + Separators.structureSeparator;
@@ -617,9 +617,9 @@ class InlineControlContainer extends HTMLElement {
 
     if (!isLoading) {
       const ajaxRequest = this.ajaxDispatcher.newRequest(this.ajaxDispatcher.getEndpoint(this.endpoints.details));
-      const request = this.ajaxDispatcher.send(ajaxRequest, [objectId]);
+      const request = this.ajaxDispatcher.send<InlineResponseInterface>(ajaxRequest, [objectId]);
 
-      request.then(async (response: InlineResponseInterface): Promise<void> => {
+      request.then(async (response): Promise<void> => {
         delete this.requestQueue[objectId];
         delete this.progressQueue[objectId];
 
@@ -762,7 +762,7 @@ class InlineControlContainer extends HTMLElement {
     const currentRecordContainer = this.getRecordContainer(objectId);
     const recordUid = currentRecordContainer.dataset.objectUid;
     const recordListContainer = this.recordsContainer;
-    const records = Array.from(recordListContainer.children).map((child: HTMLElement) => child.dataset.objectUid);
+    const records = Array.from(recordListContainer.children as HTMLCollectionOf<HTMLElement>).map((child) => child.dataset.objectUid);
     const position = records.indexOf(recordUid);
     let isChanged = false;
 
@@ -795,8 +795,8 @@ class InlineControlContainer extends HTMLElement {
     }
 
     const recordListContainer = this.recordsContainer;
-    const records = Array.from(recordListContainer.querySelectorAll(selector`[data-object-parent-group="${this.objectGroup}"][data-placeholder-record="0"]`))
-      .map((child: HTMLElement) => child.dataset.objectUid);
+    const records = Array.from(recordListContainer.querySelectorAll<HTMLElement>(selector`[data-object-parent-group="${this.objectGroup}"][data-placeholder-record="0"]`))
+      .map((child) => child.dataset.objectUid);
 
     (<HTMLInputElement>formField).value = records.join(',');
     FormEngine.markFieldAsChanged(formField);
@@ -841,12 +841,12 @@ class InlineControlContainer extends HTMLElement {
    * @param {boolean} visible
    */
   private toggleContainerControls(visible: boolean): void {
-    const controlContainer = this.querySelectorAll(
+    const controlContainer = this.querySelectorAll<HTMLElement>(
       ':scope > ' + Selectors.controlContainer
     );
-    controlContainer.forEach((container: HTMLElement): void => {
+    controlContainer.forEach((container): void => {
       const controlContainerButtons = container.querySelectorAll<HTMLButtonElement | HTMLAnchorElement>('button, a');
-      controlContainerButtons.forEach((button: HTMLButtonElement | HTMLAnchorElement): void => {
+      controlContainerButtons.forEach((button): void => {
         button.hidden = !visible;
       });
     });
@@ -912,7 +912,7 @@ class InlineControlContainer extends HTMLElement {
       return;
     }
 
-    records.forEach((recordUid: string, index: number): void => {
+    records.forEach((recordUid, index): void => {
       const recordContainer = this.getRecordContainer(objectId + Separators.structureSeparator + recordUid);
       if (recordContainer === null) {
         return;

package/backend/form-engine/element/abstract-sortable-select-items.ts

@@ -25,7 +25,7 @@ export abstract class AbstractSortableSelectItems {
    * @param {HTMLSelectElement} fieldElement
    */
   private static moveOptionToTop(fieldElement: HTMLSelectElement): void {
-    Array.from(fieldElement.querySelectorAll(':checked')).reverse().forEach((optionEl: HTMLOptionElement): void => {
+    Array.from(fieldElement.querySelectorAll<HTMLOptionElement>(':checked')).reverse().forEach((optionEl): void => {
       fieldElement.insertBefore(optionEl, fieldElement.firstElementChild);
     });
   }
@@ -36,7 +36,7 @@ export abstract class AbstractSortableSelectItems {
    * @param {HTMLSelectElement} fieldElement
    */
   private static moveOptionToBottom(fieldElement: HTMLSelectElement): void {
-    fieldElement.querySelectorAll(':checked').forEach((optionEl: HTMLOptionElement): void => {
+    fieldElement.querySelectorAll<HTMLOptionElement>(':checked').forEach((optionEl): void => {
       fieldElement.insertBefore(optionEl, null);
     });
   }
@@ -85,7 +85,7 @@ export abstract class AbstractSortableSelectItems {
    */
   private static removeOption(fieldElement: HTMLSelectElement, availableFieldElement: HTMLSelectElement): void {
     const previousSelectIndex = fieldElement.selectedIndex;
-    fieldElement.querySelectorAll(':checked').forEach((option: HTMLOptionElement): void => {
+    fieldElement.querySelectorAll<HTMLOptionElement>(':checked').forEach((option): void => {
       const originalOption = <HTMLOptionElement>availableFieldElement.querySelector(selector`option[value="${option.value}"]`);
       if (originalOption !== null) {
         originalOption.classList.remove('hidden');

package/backend/form-engine/element/color-element.ts

@@ -72,7 +72,7 @@ class ColorElement extends HTMLElement {
     FormEngineValidation.validateField(e.target as HTMLInputElement);
     FormEngine.markFieldAsChanged(e.target as HTMLInputElement);
 
-    document.querySelectorAll('.module-docheader-bar .btn').forEach((btn: HTMLButtonElement): void => {
+    document.querySelectorAll<HTMLButtonElement>('.module-docheader-bar .btn').forEach((btn): void => {
       btn.classList.remove('disabled');
       btn.disabled = false;
     });

package/backend/form-engine/element/datetime-element.ts

@@ -56,7 +56,7 @@ class DatetimeElement extends HTMLElement {
       FormEngineValidation.validateField(e.target as HTMLInputElement);
       FormEngine.markFieldAsChanged(e.target as HTMLInputElement);
 
-      document.querySelectorAll('.module-docheader-bar .btn').forEach((btn: HTMLButtonElement): void => {
+      document.querySelectorAll<HTMLButtonElement>('.module-docheader-bar .btn').forEach((btn): void => {
         btn.classList.remove('disabled');
         btn.disabled = false;
       });

package/backend/form-engine/element/extra/char-counter.ts

@@ -73,11 +73,11 @@ export class CharCounter extends LitElement {
     this.targetElement.removeEventListener('blur', this.onBlur);
   }
 
-  private readonly onInput = (e: InputEvent): void => {
+  private readonly onInput = (e: Event): void => {
     this.determineRemainingCharacters(e.target as HTMLInputElement|HTMLTextAreaElement);
   };
 
-  private readonly onFocus = (e: FocusEvent): void => {
+  private readonly onFocus = (e: Event): void => {
     this.determineRemainingCharacters(e.target as HTMLInputElement|HTMLTextAreaElement);
     this.hidden = false;
   };

package/backend/form-engine/element/extra/select-box-filter.ts

@@ -82,7 +82,7 @@ class SelectBoxFilter {
     // A plain substring match, no RegExp involved, therefore nothing to escape either
     const foldedFilterText = TextNormalizer.foldCaseAndDiacritics(TextNormalizer.normalizeInvisibleCharacters(filterText));
 
-    this.availableOptions.forEach((option: HTMLOptionElement, index: number): void => {
+    this.availableOptions.forEach((option, index): void => {
       option.hidden = filterText.length > 0 && !this.foldedLabels[index].includes(foldedFilterText);
       SelectBoxFilter.toggleOptGroup(option);
     });

package/backend/form-engine/element/mfa-info-element.ts

@@ -71,7 +71,7 @@ class MfaInfoElement {
       this.prepareDeactivateRequest(this.deactivteMfaButton);
     }).bindTo(this.deactivteMfaButton);
 
-    this.deactivteProviderButtons.forEach((buttonElement: HTMLButtonElement): void => {
+    this.deactivteProviderButtons.forEach((buttonElement): void => {
       new RegularEvent('click', (e: Event): void => {
         e.preventDefault();
         this.prepareDeactivateRequest(buttonElement);
@@ -120,7 +120,7 @@ class MfaInfoElement {
     }).then(async (response: AjaxResponse): Promise<void> => {
       const data: Response = await response.resolve();
       if (data.status.length > 0) {
-        data.status.forEach((status: Status): void => {
+        data.status.forEach((status): void => {
           if (data.success) {
             Notification.success(status.title, status.message);
           } else {

package/backend/form-engine/element/online-media-form-element.ts

@@ -30,14 +30,14 @@ export class OnlineMediaFormElement extends LitElement {
 
   protected override render(): TemplateResult {
     return html`
-      <form @submit="${ this.dispatchSubmitEvent }">
+      <form id="online-media-form" @submit="${ this.dispatchSubmitEvent }">
         <div class="form-control-wrap">
-          <input type="text" class="form-control" name="online-media-url" placeholder="${this.placeholder}" required>
+          <input type="text" class="form-control" name="online-media-url" placeholder="${this.placeholder}" required autofocus>
           <div class="form-text">
             ${this.allowedExtensionsHelpText}<br>
             <ul class="badge-list">
-            ${this.allowedExtensions.split(',').map((ext: string) => html`
-              <li><span class="badge badge-secondary">${ext.trim().toUpperCase()}</span></li>
+            ${this.allowedExtensions.split(',').map((ext) => html`
+              <li><span class="badge badge-secondary">${ext.trim().toLowerCase()}</span></li>
             `)}
             </ul>
           </div>
@@ -62,4 +62,8 @@ declare global {
   interface HTMLElementTagNameMap {
     'typo3-backend-formengine-online-media-form': OnlineMediaFormElement;
   }
+
+  interface HTMLElementEventMap {
+    'typo3:formengine:online-media-added': CustomEvent<{ file: number }>;
+  }
 }

package/backend/form-engine/element/select-multiple-side-by-side-element.ts

@@ -52,9 +52,9 @@ class SelectMultipleSideBySideElement extends AbstractSortableSelectItems {
     const fieldName = element.dataset.relatedfieldname;
     if (fieldName) {
       const exclusiveValues = Utility.trimExplode(',', element.dataset?.exclusivevalues ?? '');
-      const selectedOptions = element.querySelectorAll('option:checked'); // Yep, :checked finds selected options
+      const selectedOptions = element.querySelectorAll<HTMLOptionElement>('option:checked'); // Yep, :checked finds selected options
       if (selectedOptions.length > 0) {
-        selectedOptions.forEach((optionElement: HTMLOptionElement): void => {
+        selectedOptions.forEach((optionElement): void => {
           FormEngine.setSelectOptionFromExternalSource(
             fieldName,
             optionElement.value,