From c5888c9d8ed24a9008be6b65a232b2ad98aa2558 Mon Sep 17 00:00:00 2001 From: Alix JEUDI--LEMOINE Date: Thu, 29 May 2025 18:42:44 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20error=20handling=20when=20u?= =?UTF-8?q?ploading=20images=20and=20keeping=20existing=20files=20when=20a?= =?UTF-8?q?dding=20another=20one?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../add-pin-popup.component.html | 1 + .../add-pin-popup/add-pin-popup.component.ts | 60 ++++++++++++++----- 2 files changed, 45 insertions(+), 16 deletions(-) diff --git a/src/app/components/add-pin-popup/add-pin-popup.component.html b/src/app/components/add-pin-popup/add-pin-popup.component.html index b5c8777..e1bd07b 100644 --- a/src/app/components/add-pin-popup/add-pin-popup.component.html +++ b/src/app/components/add-pin-popup/add-pin-popup.component.html @@ -124,6 +124,7 @@ [initialFiles]="getFileNames()" (filesSelected)="onFilesReceived($event)" (fileRemoved)="removeFile($event)" + [errorMessage]="uploadError" > diff --git a/src/app/components/add-pin-popup/add-pin-popup.component.ts b/src/app/components/add-pin-popup/add-pin-popup.component.ts index 39b0d1c..e6507fd 100644 --- a/src/app/components/add-pin-popup/add-pin-popup.component.ts +++ b/src/app/components/add-pin-popup/add-pin-popup.component.ts @@ -44,6 +44,7 @@ export class AddPinPopupComponent implements OnInit { isPinModalOpen: boolean = false; modalId: string = 'add-pin-modal'; private modalSub!: Subscription; + uploadError: string = ''; constructor( private fb: FormBuilder, @@ -109,6 +110,9 @@ export class AddPinPopupComponent implements OnInit { debounceTime(200), // Attendre 200ms après la dernière frappe distinctUntilChanged(), // Ignorer si la nouvelle valeur est la même que la précédente switchMap((query) => { + if(query === null) { + return of([]); + } const trimmedQuery = query.trim(); if (trimmedQuery.length > 2) { return this.autocompleteService.getAddressSuggestions(trimmedQuery); @@ -136,7 +140,9 @@ export class AddPinPopupComponent implements OnInit { } async onFilesReceived(files: FileList): Promise { - this.files = Array.from(files); + // Ajouter les nouveaux fichiers à la liste existante + this.files = [...this.files, ...Array.from(files)]; + this.uploadError = ''; // Réinitialiser l'erreur if (this.dragDropComponent) { this.dragDropComponent.updateFileNamesFromFileList(files); @@ -144,19 +150,18 @@ export class AddPinPopupComponent implements OnInit { console.warn('AddPinPopupComponent - dragDropComponent not available'); } - for (let i = 0; i < this.files.length; i++) { + // Ne traiter que la première photo pour les métadonnées EXIF + if (files.length > 0) { try { - const data = await this.exifService.getLocation(this.files[i]); + const data = await this.exifService.getLocation(files[0]); if (data.latitude !== undefined && data.longitude !== undefined) { - const address = await this.autocompleteService - .getAddressFromCoordinates(data.latitude, data.longitude) - .toPromise(); - if (address) { - this.form.get('location')?.setValue(address.display_name); - this.form.get('complete_address')?.setValue(address.display_name); - this.form.get('coordinates')?.setValue([data.latitude, data.longitude]); - break; - } + this.autocompleteService.getAddressFromCoordinates(data.latitude, data.longitude).subscribe((address) => { + if (address) { + this.form.get('location')?.setValue(address.display_name); + this.form.get('complete_address')?.setValue(address.display_name); + this.form.get('coordinates')?.setValue([data.latitude, data.longitude]); + } + }); } } catch (error) { console.error( @@ -183,11 +188,29 @@ export class AddPinPopupComponent implements OnInit { }); if (this.form.valid) { - const uploadObservables = this.files.map((file) => - this.imageService.postImage(file) - ); + const uploadObservables = this.files.map((file) => { + if(file.size === 0) { + this.uploadError = file.name + ' : ' + 'Image vide'; + return of(null); + } + + return this.imageService.postImage(file).pipe( + catchError(error => { + this.uploadError = file.name + ' : ' + error.error.detail || 'Erreur lors de l\'upload de l\'image'; + if (this.dragDropComponent) { + this.dragDropComponent.errorMessage = this.uploadError; + } + return of(null); + }) + ) + }); forkJoin(uploadObservables).subscribe((responses) => { + // Vérifier si toutes les réponses sont valides + if (responses.some(response => response === null)) { + return; // Ne pas continuer si une erreur s'est produite + } + this.files = responses.map((res: any) => res.id); const coordinates = this.form.get('coordinates')?.value; @@ -216,7 +239,6 @@ export class AddPinPopupComponent implements OnInit { } openPinModal() { - // this.isPinModalOpen = true; this.modalService.openModal(this.modalId); } @@ -224,8 +246,10 @@ export class AddPinPopupComponent implements OnInit { this.modalService.closeModal(this.modalId); this.form.reset(); this.files = []; + this.uploadError = ''; if (this.dragDropComponent) { this.dragDropComponent.updateFileNamesFromFileList(new DataTransfer().files); + this.dragDropComponent.errorMessage = ''; } } @@ -237,6 +261,10 @@ export class AddPinPopupComponent implements OnInit { const index = this.files.findIndex((file) => file.name === fileName); if (index > -1) { this.files.splice(index, 1); + this.uploadError = ''; // Réinitialiser l'erreur lors de la suppression d'un fichier + if (this.dragDropComponent) { + this.dragDropComponent.errorMessage = ''; + } // Mettre à jour le form control const dataTransfer = new DataTransfer();