From 5a45c044b338696eb5d672d21e177af2ddc8bb4a Mon Sep 17 00:00:00 2001 From: jogt Date: Wed, 29 Mar 2023 18:32:18 +0200 Subject: [PATCH 1/6] Added .idea to gitignore for JetBrains editors --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index f96af24..ab2eac6 100755 --- a/.gitignore +++ b/.gitignore @@ -24,6 +24,7 @@ .env.development.local .env.test.local .env.production.local +.idea npm-debug.log* yarn-debug.log* From fe957f0de329acd43c3fee3667346ab2be7ab6b3 Mon Sep 17 00:00:00 2001 From: jogt Date: Wed, 29 Mar 2023 18:33:11 +0200 Subject: [PATCH 2/6] Updated online design system to version that is available --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d6d3a3f..c55eb2f 100644 --- a/package.json +++ b/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", From 5967c87726a13b4c2fa532304b85a8d6f7e94730 Mon Sep 17 00:00:00 2001 From: jogt Date: Wed, 29 Mar 2023 22:07:51 +0200 Subject: [PATCH 3/6] Added image downscaling to help with file upload limit --- .../Areas/Attachments/AttachmentInputs.tsx | 6 +- src/utils/resizeUploadImage.ts | 55 +++++++++++++++++++ 2 files changed, 59 insertions(+), 2 deletions(-) create mode 100644 src/utils/resizeUploadImage.ts diff --git a/src/components/Areas/Attachments/AttachmentInputs.tsx b/src/components/Areas/Attachments/AttachmentInputs.tsx index fa54f29..bc4ad34 100644 --- a/src/components/Areas/Attachments/AttachmentInputs.tsx +++ b/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(); }; diff --git a/src/utils/resizeUploadImage.ts b/src/utils/resizeUploadImage.ts new file mode 100644 index 0000000..1667e65 --- /dev/null +++ b/src/utils/resizeUploadImage.ts @@ -0,0 +1,55 @@ +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 { + const canvas = document.createElement("canvas"); + const img = document.createElement("img"); + + return new Promise((resolve, reject) => { + img.onload = () => { + const { width, height } = rescaledResolution(img.width, img.height); + + canvas.width = width; + canvas.height = height; + + const ctx = canvas.getContext("2d"); + if (!ctx) { + reject(new Error("Could not get canvas context")); + return; + } + + ctx.drawImage(img, 0, 0, width, height); + + canvas.toBlob( + (blob) => { + if (!blob) { + reject(new Error("Could not resize image")); + return; + } + + resolve(new File([blob], "kvittering.jpg", { type: "image/jpeg" })); + } + ); + }; + img.onerror = reject; + img.src = URL.createObjectURL(file); + }); +} \ No newline at end of file From e0a7b3051f33b339be89bbba548025ec30408b25 Mon Sep 17 00:00:00 2001 From: jogt Date: Wed, 29 Mar 2023 22:10:57 +0200 Subject: [PATCH 4/6] Fixed linting --- src/utils/resizeUploadImage.ts | 95 ++++++++++++++++------------------ 1 file changed, 46 insertions(+), 49 deletions(-) diff --git a/src/utils/resizeUploadImage.ts b/src/utils/resizeUploadImage.ts index 1667e65..50a5ab5 100644 --- a/src/utils/resizeUploadImage.ts +++ b/src/utils/resizeUploadImage.ts @@ -1,55 +1,52 @@ 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, - }; - } + 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 { - const canvas = document.createElement("canvas"); - const img = document.createElement("img"); - - return new Promise((resolve, reject) => { - img.onload = () => { - const { width, height } = rescaledResolution(img.width, img.height); - - canvas.width = width; - canvas.height = height; - - const ctx = canvas.getContext("2d"); - if (!ctx) { - reject(new Error("Could not get canvas context")); - return; - } - - ctx.drawImage(img, 0, 0, width, height); - - canvas.toBlob( - (blob) => { - if (!blob) { - reject(new Error("Could not resize image")); - return; - } - - resolve(new File([blob], "kvittering.jpg", { type: "image/jpeg" })); - } - ); - }; - img.onerror = reject; - img.src = URL.createObjectURL(file); - }); -} \ No newline at end of file + const canvas = document.createElement('canvas'); + const img = document.createElement('img'); + + return new Promise((resolve, reject) => { + img.onload = () => { + const { width, height } = rescaledResolution(img.width, img.height); + + canvas.width = width; + canvas.height = height; + + const ctx = canvas.getContext('2d'); + if (!ctx) { + reject(new Error('Could not get canvas context')); + return; + } + + ctx.drawImage(img, 0, 0, width, height); + + canvas.toBlob((blob) => { + if (!blob) { + reject(new Error('Could not resize image')); + return; + } + + resolve(new File([blob], 'kvittering.jpg', { type: 'image/jpeg' })); + }); + }; + img.onerror = reject; + img.src = URL.createObjectURL(file); + }); +} From 6d531043bb64ef89deffa069bd72803a8f818a71 Mon Sep 17 00:00:00 2001 From: jogt Date: Wed, 29 Mar 2023 22:15:18 +0200 Subject: [PATCH 5/6] Gave resized receipt images more appropriate names --- src/utils/resizeUploadImage.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/utils/resizeUploadImage.ts b/src/utils/resizeUploadImage.ts index 50a5ab5..b93ed93 100644 --- a/src/utils/resizeUploadImage.ts +++ b/src/utils/resizeUploadImage.ts @@ -23,6 +23,8 @@ export function resizeUploadImage(file: File): Promise { 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); @@ -30,7 +32,7 @@ export function resizeUploadImage(file: File): Promise { canvas.height = height; const ctx = canvas.getContext('2d'); - if (!ctx) { + if (ctx === null) { reject(new Error('Could not get canvas context')); return; } @@ -43,7 +45,7 @@ export function resizeUploadImage(file: File): Promise { return; } - resolve(new File([blob], 'kvittering.jpg', { type: 'image/jpeg' })); + resolve(new File([blob], new_file_name, { type: 'image/jpeg' })); }); }; img.onerror = reject; From 228aeae046f61847a146d1de059635fd5d50cdec Mon Sep 17 00:00:00 2001 From: jogt Date: Wed, 29 Mar 2023 22:38:04 +0200 Subject: [PATCH 6/6] Fixed mime type --- src/utils/resizeUploadImage.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/utils/resizeUploadImage.ts b/src/utils/resizeUploadImage.ts index b93ed93..ea32f24 100644 --- a/src/utils/resizeUploadImage.ts +++ b/src/utils/resizeUploadImage.ts @@ -39,14 +39,17 @@ export function resizeUploadImage(file: File): Promise { ctx.drawImage(img, 0, 0, width, height); - canvas.toBlob((blob) => { - if (!blob) { - reject(new Error('Could not resize image')); - return; - } - - resolve(new File([blob], new_file_name, { type: 'image/jpeg' })); - }); + 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);