Merge pull request #6047 from WoltLab/file-upload-image-crop

File processor image cropping

.github/workflows/javascript.yml

@@ -74,3 +74,9 @@ jobs:
     - name: "Check 'sortablejs'"
       run: |
         diff -wu wcfsetup/install/files/js/3rdParty/Sortable.min.js node_modules/sortablejs/Sortable.min.js
+    - name: "Check 'cropperjs'"
+      run: |
+        diff -wu wcfsetup/install/files/js/3rdParty/cropper.min.js node_modules/cropperjs/dist/cropper.min.js
+    - name: "Check 'exifreader'"
+      run: |
+        diff -wu wcfsetup/install/files/js/3rdParty/exif-reader.js node_modules/exifreader/dist/exif-reader.js

package.json

@@ -29,7 +29,9 @@
     "@woltlab/editor": "git+https://github.com/WoltLab/editor.git#54d7052a834e3b41e5fdacd8a17a4a4ea1b6e76c",
     "@woltlab/visual-dom-diff": "git+https://github.com/WoltLab/visual-dom-diff.git#e5b51fce3157d1eda310566fc1f86101341d1fea",
     "@woltlab/zxcvbn": "git+https://github.com/WoltLab/zxcvbn.git#5b582b24e437f1883ccad3c37dae7c3c5f1e7da3",
+    "cropperjs": "2.0.0-rc.2",
     "emoji-picker-element": "^1.23.0",
+    "exifreader": "^4.25.0",
     "focus-trap": "^7.6.1",
     "html-parsed-element": "^0.4.1",
     "perfect-scrollbar": "^1.5.6",
@@ -39,5 +41,15 @@
     "tabbable": "^6.2.0",
     "tslib": "^2.8.1",
     "webpack-cli": "^5.1.4"
+  },
+  "exifreader": {
+    "include": {
+      "jpeg": true,
+      "png": true,
+      "webp": true,
+      "exif": [
+        "Orientation"
+      ]
+    }
   }
 }

ts/WoltLabSuite/Core/Component/File/Upload.ts

@@ -11,6 +11,7 @@ import ImageResizer from "WoltLabSuite/Core/Image/Resizer";
 import { AttachmentData } from "../Ckeditor/Attachment";
 import { innerError } from "WoltLabSuite/Core/Dom/Util";
 import { getPhrase } from "WoltLabSuite/Core/Language";
+import { cropImage, CropperConfiguration } from "WoltLabSuite/Core/Component/Image/Cropper";
 
 export type CkeditorDropEvent = {
   file: File;
@@ -268,9 +269,28 @@ export function setup(): void {
         return;
       }
 
-      void resizeImage(element, file).then((resizedFile) => {
-        void upload(element, resizedFile);
-      });
+      if (element.dataset.cropperConfiguration) {
+        const cropperConfiguration = JSON.parse(element.dataset.cropperConfiguration) as CropperConfiguration;
+
+        void cropImage(element, file, cropperConfiguration)
+          .then((resizedFile) => {
+            void upload(element, resizedFile);
+          })
+          .catch((e) => {
+            if (e === undefined) {
+              // User closed the dialog.
+              return;
+            }
+
+            if (e instanceof Error) {
+              innerError(element, e.message);
+            }
+          });
+      } else {
+        void resizeImage(element, file).then((resizedFile) => {
+          void upload(element, resizedFile);
+        });
+      }
     });
 
     element.addEventListener("ckeditorDrop", (event: CustomEvent<CkeditorDropEvent>) => {