Resize receipt images before upload

.gitignore

@@ -24,6 +24,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.idea
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -3,7 +3,7 @@
   "version": "2.2.1",
   "private": true,
   "dependencies": {
-    "@dotkomonline/design-system": "^0.22.0",
+    "@dotkomonline/design-system": "^0.22.2",
     "@reduxjs/toolkit": "^1.4.0",
     "@sentry/browser": "^5.0.3",
     "@sentry/node": "^5.4.3",

src/components/Areas/Attachments/AttachmentInputs.tsx

@@ -6,6 +6,7 @@ import { useValidation } from 'hooks/useValidation';
 import { useDispatch, useSelector } from 'redux/hooks';
 import { areFilesEqual } from 'utils/file';
 import { formDataUpdated } from 'redux/reducers/formReducer';
+import { resizeUploadImage } from 'utils/resizeUploadImage';
 
 export const AttachmentsInputs: FC = () => {
   const dispatch = useDispatch();
@@ -18,8 +19,9 @@ export const AttachmentsInputs: FC = () => {
     dispatch(formDataUpdated({ attachments: newAttachments }));
   };
 
-  const handleFileChange = (file: File) => {
-    const newAttachments = [...attachments, file];
+  const handleFileChange = async (file: File) => {
+    const resizedFile = await resizeUploadImage(file);
+    const newAttachments = [...attachments, resizedFile];
     dispatch(formDataUpdated({ attachments: newAttachments }));
     setInteracted();
   };

src/utils/resizeUploadImage.ts

@@ -0,0 +1,57 @@
+const MAX_SIZE = 1600;
+
+function rescaledResolution(width: number, height: number) {
+  const ratio = width / height;
+
+  if (width <= MAX_SIZE && height <= MAX_SIZE) return { width, height };
+
+  if (width > height) {
+    return {
+      width: MAX_SIZE,
+      height: Math.round(MAX_SIZE / ratio),
+    };
+  } else {
+    return {
+      width: Math.round(MAX_SIZE * ratio),
+      height: MAX_SIZE,
+    };
+  }
+}
+
+export function resizeUploadImage(file: File): Promise<File> {
+  const canvas = document.createElement('canvas');
+  const img = document.createElement('img');
+
+  return new Promise((resolve, reject) => {
+    const new_file_name = file.name.replace(/\.[^/.]+$/, '.jpg');
+
+    img.onload = () => {
+      const { width, height } = rescaledResolution(img.width, img.height);
+
+      canvas.width = width;
+      canvas.height = height;
+
+      const ctx = canvas.getContext('2d');
+      if (ctx === null) {
+        reject(new Error('Could not get canvas context'));
+        return;
+      }
+
+      ctx.drawImage(img, 0, 0, width, height);
+
+      canvas.toBlob(
+        (blob) => {
+          if (blob === null) {
+            reject(new Error('Could not resize image'));
+            return;
+          }
+          resolve(new File([blob], new_file_name, { type: 'image/jpeg' }));
+        },
+        'image/jpeg',
+        0.8
+      );
+    };
+    img.onerror = reject;
+    img.src = URL.createObjectURL(file);
+  });
+}