hotfix: compress image and apply exif orientation

docker-compose.yaml

@@ -5,18 +5,6 @@ volumes:
   minio_data:
 
 services:
-  # frontend:
-  #   image: ghcr.io/betagouv/compte-rendu-vif-frontend:latest
-  #   restart: always
-  #   depends_on:
-  #     - electric
-
-  # backend:
-  #   image: ghcr.io/betagouv/compte-rendu-vif-backend:latest
-  #   restart: always
-  #   depends_on:
-  #     - electric
-
   pg:
     image: postgres:14-alpine
     environment:

packages/frontend/package.json

@@ -48,6 +48,7 @@
     "@tiptap/starter-kit": "^2.4.0",
     "@ungap/with-resolvers": "^0.1.0",
     "@xstate/store": "^0.0.5",
+    "browser-image-compression": "^2.0.2",
     "buffer": "^6.0.3",
     "date-fns": "^3.6.0",
     "electric-sql": "^0.12.1",

packages/frontend/src/features/upload/UploadImage.tsx

@@ -24,6 +24,7 @@ import { css } from "#styled-system/css";
 import { createModal } from "@codegouvfr/react-dsfr/Modal";
 import { ImageCanvas, Line } from "./DrawingCanvas";
 import { api } from "../../api";
+import imageCompression from "browser-image-compression";
 
 const modal = createModal({
   id: "edit-picture",
@@ -50,8 +51,6 @@ export const UploadImage = ({ reportId }: { reportId: string }) => {
     }
   });
 
-  // const linesQuery = useLiveQuery(db.picture_lines.liveMany({ where: { pictureId: selectedPicture?.id } }));
-
   const linesQuery = useQuery({
     queryKey: ["lines", selectedPicture?.id],
     queryFn: async () => {
@@ -66,7 +65,7 @@ export const UploadImage = ({ reportId }: { reportId: string }) => {
 
   const uploadImageMutation = useMutation(async (file: File) => {
     const picId = v4();
-    const buffer = await getArrayBufferFromBlob(file);
+    const buffer = await processImage(file);
 
     await db.tmp_pictures.create({ data: { id: picId, reportId, createdAt: new Date() } });
     await set(picId, buffer, getPicturesStore());
@@ -154,17 +153,16 @@ export const UploadImage = ({ reportId }: { reportId: string }) => {
         type="button"
         iconId="ri-add-line"
         priority="secondary"
-        disabled
         nativeButtonProps={{
           type: "button",
           onClick: () => ref.current?.click(),
         }}
       >
         Ajouter photo
       </Button>
-      <styled.div mt="16px" color="gray">
+      {/* <styled.div mt="16px" color="gray">
         Le téléversement d'image est désactivé temporairement, mais il revient optimisé bientôt.
-      </styled.div>
+      </styled.div> */}
       <styled.input ref={ref as any} type="file" accept="image/*" onChange={onChange} display="none" />
       <ReportPictures setSelectedPicture={setSelectedPicture} statusMap={statusMap} />
     </>
@@ -415,10 +413,19 @@ const statusData = {
   error: { label: "Erreur", bgColor: "#FEC9C9", color: "#853C3C", icon: "fr-icon-warning-line" },
 };
 
-async function getArrayBufferFromBlob(blob: Blob) {
-  return new Promise<ArrayBuffer>((resolve, _) => {
-    const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result as ArrayBuffer);
-    reader.readAsArrayBuffer(blob);
-  });
-}
+const processImage = async (file: File) => {
+  try {
+    const options = {
+      maxSizeMB: 1,
+      maxWidthOrHeight: 1920,
+      useWebWorker: true,
+      preserveExif: false,
+    };
+
+    const compressedFile = await imageCompression(file, options);
+    return compressedFile.arrayBuffer();
+  } catch (error) {
+    console.error("Error processing image:", error);
+    throw error;
+  }
+};