✨ Added error handling when uploading images and keeping existing files when adding another one

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"
             ></app-drag-drop>
           </div>
 

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<void> {
-    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();