Added lib to compress image into jpeg before send on backend

src/app/components/challenge-card/challenge-card.component.ts

@@ -1,5 +1,5 @@
 import {Component, inject, input, signal, viewChild} from '@angular/core';
-import {IonicModule, ToastController} from "@ionic/angular";
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
 import {GetRandomChallengeDto, RandomchallengesService} from "../../services/api";
 import {firstValueFrom} from "rxjs";
 import {TooltipComponent} from "../tooltip/tooltip.component";
@@ -19,6 +19,7 @@ import {SignOnFormComponent} from "../sign-on-form/sign-on-form.component";
 export class ChallengeCardComponent {
     private randomChallengesService = inject(RandomchallengesService);
     private toastCtrl = inject(ToastController);
+    private loadCtrl = inject(LoadingController);
 
     action = input.required<string>();
     tag = input.required<string>();
@@ -34,8 +35,26 @@ export class ChallengeCardComponent {
     }
 
     async sendProof(randomChallengeId: number) {
+        const file = this.proof().proofForm.value.proof;
+
+        if (!file) {
+            const toast = await this.toastCtrl.create({
+                message: 'Aucune preuve n\'a été déposée',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+            return;
+        }
+
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
         try {
-            await firstValueFrom(this.randomChallengesService.patchProofEndpoint(randomChallengeId, this.proof().proofForm.value.proof));
+            await firstValueFrom(this.randomChallengesService.patchProofEndpoint(randomChallengeId, file));
 
             this.isModalOpen = false;
             const toast = await this.toastCtrl.create({
@@ -45,6 +64,7 @@ export class ChallengeCardComponent {
             });
             await toast.present();
         } catch {
+            this.isModalOpen = false;
             const toast = await this.toastCtrl.create({
                 message: 'Tu as déjà déposé une preuve pour ce défi',
                 duration: 2000,
@@ -52,5 +72,6 @@ export class ChallengeCardComponent {
             });
             await toast.present();
         }
+        await loading.dismiss();
     }
 }

src/app/components/proof-form/proof-form.component.html

@@ -13,5 +13,5 @@
         }
     </div>
 
-    <input #fileInput type="file" hidden (change)="onFileChange(fileInput.files)">
+    <input #fileInput type="file" accept="image/*" hidden (change)="onFileChange(fileInput.files)">
 </form>

src/app/components/proof-form/proof-form.component.ts

@@ -1,8 +1,9 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
-import {IonicModule} from "@ionic/angular";
+import {IonicModule, LoadingController} from "@ionic/angular";
 import {TitlePartComponent} from "../title-part/title-part.component";
 import {NgClass} from "@angular/common";
+import imageCompression from 'browser-image-compression';
 
 @Component({
     selector: 'app-proof-form',
@@ -17,20 +18,39 @@ import {NgClass} from "@angular/common";
     ]
 })
 export class ProofFormComponent {
+    private loadCtrl = inject(LoadingController);
+
     proofForm: FormGroup = new FormGroup({
         proof: new FormControl(null, [Validators.required]),
     })
 
     previewUrl: string | null = null;
 
-    onFileChange(files?: FileList | null) {
+    async onFileChange(files?: FileList | null) {
         if (!files?.length) return;
 
+        const loading = await this.loadCtrl.create({
+            message: 'Compression...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
         const file = files[0];
 
-        this.previewUrl = URL.createObjectURL(file);
+        // Compression en JPEG de l'image (moins lourd en BDD)
+        const options = {
+            maxSizeMB: 1,
+            maxWidthOrHeight: 1080,
+            useWebWorker: true,
+            fileType: 'image/jpeg'
+        }
+
+        const compressed = await imageCompression(file, options);
+
+        this.previewUrl = URL.createObjectURL(compressed);
         this.proofForm.patchValue({
-            proof: file
+            proof: compressed
         });
+        await loading.dismiss();
     }
 }

src/app/components/search-friend/search-friend.component.ts

@@ -28,11 +28,11 @@ export class SearchFriendComponent implements OnInit {
     async ngOnInit() {
         const loading = await this.loadCtrl.create({
             message: 'Chargement...',
-            duration: 1000,
             spinner: 'lines-sharp-small'
         });
         await loading.present();
         await this.fetchUsers();
+        await loading.dismiss();
     }
 
     async fetchUsers() {