Merge branch 'refs/heads/master' into upload-form-field-v2

# Conflicts:
#	wcfsetup/install/files/style/ui/attachment.scss

diff --cc ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
index a1a2eee7d5dcb0930634389bc131ee16ade696da,408b113141b21b73e7a704ed4fbc5295246a2a83..64e75fd04e592d33b745bff4a2b493c248a6d740
--- 1/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
--- 2/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
+++ b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
@@@ -188,12 -188,44 +188,44 @@@ function markElementAsErroneous(element
    element.append(errorElement);
  }
  
+ function trackUploadProgress(element: HTMLElement, file: WoltlabCoreFileElement): void {
+   const progress = document.createElement("progress");
+   progress.classList.add("attachment__item__progress__bar");
+   progress.max = 100;
+   const readout = document.createElement("span");
+   readout.classList.add("attachment__item__progress__readout");
+ 
+   file.addEventListener("uploadProgress", (event: CustomEvent<number>) => {
+     progress.value = event.detail;
+     readout.textContent = `${event.detail}%`;
+ 
+     if (progress.parentNode === null) {
+       element.classList.add("attachment__item--uploading");
+ 
+       const wrapper = document.createElement("div");
+       wrapper.classList.add("attachment__item__progress");
+       wrapper.append(progress, readout);
+ 
+       element.append(wrapper);
+     }
+   });
+ }
+ 
+ function removeUploadProgress(element: HTMLElement): void {
+   if (!element.classList.contains("attachment__item--uploading")) {
+     return;
+   }
+ 
+   element.classList.remove("attachment__item--uploading");
+   element.querySelector(".attachment__item__progress")?.remove();
+ }
+ 
  export function createAttachmentFromFile(file: WoltlabCoreFileElement, editor: HTMLElement) {
    const element = document.createElement("li");
 -  element.classList.add("attachment__item");
 +  element.classList.add("fileList__item", "attachment__item");
  
    const fileWrapper = document.createElement("div");
 -  fileWrapper.classList.add("attachment__item__file");
 +  fileWrapper.classList.add("fileList__item__file");
    fileWrapper.append(file);
  
    const filename = document.createElement("div");

diff --cc wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
index bf794ac4ad0d071efdcd852ccb76d856f4d3389f,a158f397958da4d2dcf64110587c227a66f6e7d7..95efe5dc1644994abcfff563b697f49dfad0a998
--- 1/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
--- 2/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
@@@ -141,17 -141,42 +141,42 @@@ define(["require", "exports", "tslib", 
          errorElement.textContent = errorMessage;
          element.append(errorElement);
      }
+     function trackUploadProgress(element, file) {
+         const progress = document.createElement("progress");
+         progress.classList.add("attachment__item__progress__bar");
+         progress.max = 100;
+         const readout = document.createElement("span");
+         readout.classList.add("attachment__item__progress__readout");
+         file.addEventListener("uploadProgress", (event) => {
+             progress.value = event.detail;
+             readout.textContent = `${event.detail}%`;
+             if (progress.parentNode === null) {
+                 element.classList.add("attachment__item--uploading");
+                 const wrapper = document.createElement("div");
+                 wrapper.classList.add("attachment__item__progress");
+                 wrapper.append(progress, readout);
+                 element.append(wrapper);
+             }
+         });
+     }
+     function removeUploadProgress(element) {
+         if (!element.classList.contains("attachment__item--uploading")) {
+             return;
+         }
+         element.classList.remove("attachment__item--uploading");
+         element.querySelector(".attachment__item__progress")?.remove();
+     }
      function createAttachmentFromFile(file, editor) {
          const element = document.createElement("li");
 -        element.classList.add("attachment__item");
 +        element.classList.add("fileList__item", "attachment__item");
          const fileWrapper = document.createElement("div");
 -        fileWrapper.classList.add("attachment__item__file");
 +        fileWrapper.classList.add("fileList__item__file");
          fileWrapper.append(file);
          const filename = document.createElement("div");
 -        filename.classList.add("attachment__item__filename");
 +        filename.classList.add("fileList__item__filename");
          filename.textContent = file.filename || file.dataset.filename;
          const fileSize = document.createElement("div");
 -        fileSize.classList.add("attachment__item__fileSize");
 +        fileSize.classList.add("fileList__item__fileSize");
          fileSize.textContent = (0, FileUtil_1.formatFilesize)(file.fileSize || parseInt(file.dataset.fileSize));
          element.append(fileWrapper, filename, fileSize);
          void file.ready

diff --cc wcfsetup/install/files/lib/data/file/File.class.php
Simple merge

diff --cc wcfsetup/install/files/style/ui/attachment.scss
index 6c30e974fbdeb5b2d6de9a3c831c48614a645e48,fdce55b367f6dbcbed3a13195cf349c401f2cd3a..5d5cc9861c9f617506c1d31cf8f490e79aba936f
--- 1/wcfsetup/install/files/style/ui/attachment.scss
--- 2/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@@ -136,6 -136,81 +136,17 @@@ html[data-color-scheme="dark"] 
  }
  
  /* attachments tab in editor */
 -.attachment__list {
 -      display: grid;
 -      gap: 10px;
 -      grid-auto-flow: row;
 -      // TODO: use container queries to make this more dynamic?
 -      grid-template-columns: repeat(3, 1fr);
 -}
 -
 -.attachment__list:not(:empty) {
 -      margin-top: 20px;
 -}
 -
 -.attachment__item {
 -      border: 1px solid var(--wcfContentBorderInner);
 -      border-radius: var(--wcfBorderRadius);
 -      box-shadow: var(--wcfBoxShadowCard);
 -      display: grid;
 -      grid-template-areas:
 -              "file filename"
 -              "file fileSize"
 -              "file buttons";
 -      grid-template-columns: 80px auto;
 -      padding: 10px;
 -}
 -
 -.attachment__item--error {
 -      border-color: var(--wcfStatusErrorBorder);
 -}
 -
 -.attachment__item--error .attachment__item__file {
 -      color: var(--wcfStatusErrorText);
 -}
 -
 -.attachment__item__file {
 -      display: flex;
 -      grid-area: file;
 -      justify-content: center;
 -      margin-right: 10px;
 -}
 -
 -.attachment__item__filename {
 -      font-size: 12px;
 -      grid-area: filename;
 -      overflow: hidden;
 -      text-overflow: ellipsis;
 -      white-space: nowrap;
 -}
 -
 -.attachment__item__fileSize {
 -      color: var(--wcfContentDimmedText);
 -      font-size: 12px;
 -      grid-area: fileSize;
 -      overflow: hidden;
 -      text-overflow: ellipsis;
 -      white-space: nowrap;
 -}
 -
 -.attachment__item__buttons {
 -      column-gap: 5px;
 -      display: flex;
 -      grid-area: buttons;
 -      justify-content: end;
 -}
 -
+ .attachment__item__progress {
+       align-items: center;
+       column-gap: 10px;
+       display: flex;
+       grid-area: buttons;
+ }
+ 
+ .attachment__item__progress__readout {
+       @include wcfFontSmall;
+ }
+ 
  .formAttachmentContent {
        .formAttachmentList {
                display: flex;

diff --cc wcfsetup/install/lang/de.xml
Simple merge

diff --cc wcfsetup/install/lang/en.xml
Simple merge