From fd6c730ae31efe03436665b2176470e29a51384f Mon Sep 17 00:00:00 2001
From: Vincent Guillet <vincent.guillet@outlook.com>
Date: Wed, 3 Dec 2025 19:46:31 +0100
Subject: [PATCH] Add image resizing utility and integrate it into product
 image upload process

---
 client/src/app/services/prestashop.serivce.ts | 19 ++++++--
 client/src/app/utils/image-utils.ts           | 45 +++++++++++++++++++
 2 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 client/src/app/utils/image-utils.ts

diff --git a/client/src/app/services/prestashop.serivce.ts b/client/src/app/services/prestashop.serivce.ts
index 7e6f41a..cdbb1b0 100644
--- a/client/src/app/services/prestashop.serivce.ts
+++ b/client/src/app/services/prestashop.serivce.ts
@@ -1,6 +1,6 @@
 import {inject, Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
-import {forkJoin, map, of, switchMap, Observable, catchError} from 'rxjs';
+import {forkJoin, map, of, switchMap, Observable, catchError, from} from 'rxjs';
 import {PsItem} from '../interfaces/ps-item';
 import {PsProduct} from '../interfaces/ps-product';
 import {ProductListItem} from '../interfaces/product-list-item';
@@ -499,9 +499,20 @@ export class PrestashopService {
   }
 
   uploadProductImage(productId: number, file: File) {
-    const fd = new FormData();
-    fd.append('image', file);
-    return this.http.post(`${this.base}/images/products/${productId}`, fd);
+    // 1) Compression AVANT upload
+    return from(resizeImage(file, 1600, 1600, 0.8)).pipe(
+      switchMap(compressedFile => {
+        const fd = new FormData();
+        fd.append('image', compressedFile); // ← image compressée
+
+        // 2) Envoi vers ton backend (identique à avant)
+        return this.http.post(
+          `${this.base}/images/products/${productId}`,
+          fd,
+          { reportProgress: true, observe: 'events' }
+        );
+      })
+    );
   }
 
   // -------- Stock (quantité) — gestion fine via stock_availables
diff --git a/client/src/app/utils/image-utils.ts b/client/src/app/utils/image-utils.ts
new file mode 100644
index 0000000..59c321b
--- /dev/null
+++ b/client/src/app/utils/image-utils.ts
@@ -0,0 +1,45 @@
+function resizeImage(
+  file: File,
+  maxWidth = 1600,
+  maxHeight = 1600,
+  quality = 0.8
+): Promise<File> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const reader = new FileReader();
+
+    reader.onload = e => {
+      if (!e.target?.result) return reject('Cannot load file');
+
+      img.onload = () => {
+        let { width, height } = img;
+
+        const ratio = Math.min(maxWidth / width, maxHeight / height, 1);
+        const newW = Math.round(width * ratio);
+        const newH = Math.round(height * ratio);
+
+        const canvas = document.createElement('canvas');
+        canvas.width = newW;
+        canvas.height = newH;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return reject('Cannot get canvas context');
+
+        ctx.drawImage(img, 0, 0, newW, newH);
+
+        canvas.toBlob(
+          blob => {
+            if (!blob) return reject('Compression failed');
+            resolve(new File([blob], file.name.replace(/\.[^.]+$/, '.jpg'), { type: 'image/jpeg' }));
+          },
+          'image/jpeg',
+          quality
+        );
+      };
+
+      img.src = e.target.result as string;
+    };
+
+    reader.readAsDataURL(file);
+  });
+}