Fix/uat registry bugs (#435)

* fix(uat): registrations bugs

* fix(files): multiple uploads

* fix(files): multiple uploads

Author: nmykhalkevch-exoft

src/app/features/files/pages/files/files.component.html

@@ -101,7 +101,7 @@
             ></osf-google-file-picker>
           }
         }
-        <input #fileInput type="file" class="hidden" (change)="onFileSelected($event)" />
+        <input #fileInput type="file" multiple class="hidden" (change)="onFileSelected($event)" />
       </div>
     </div>
 
@@ -135,7 +135,7 @@
       [provider]="provider()"
       (folderIsOpening)="folderIsOpening($event)"
       (entryFileClicked)="navigateToFile($event)"
-      (uploadFileConfirmed)="uploadFile($event)"
+      (uploadFilesConfirmed)="uploadFiles($event)"
       (filesPageChange)="onFilesPageChange($event)"
     >
     </osf-files-tree>

src/app/features/files/pages/files/files.component.ts

@@ -278,38 +278,62 @@ export class FilesComponent {
     });
   }
 
-  uploadFile(file: File): void {
+  uploadFiles(files: File | File[]): void {
     const currentFolder = this.currentFolder();
     const uploadLink = currentFolder?.links.upload;
 
     if (!uploadLink) return;
 
-    this.fileName.set(file.name);
+    const fileArray = Array.isArray(files) ? files : [files];
+    const isMultiple = fileArray.length > 1;
+    if (fileArray.length === 0) return;
+
+    this.fileName.set(fileArray.length === 1 ? fileArray[0].name : `${fileArray.length} files`);
     this.fileIsUploading.set(true);
+    this.progress.set(0);
+
+    let completedUploads = 0;
+    const totalFiles = fileArray.length;
+
+    fileArray.forEach((file) => {
+      this.filesService
+        .uploadFile(file, uploadLink)
+        .pipe(
+          takeUntilDestroyed(this.destroyRef),
+          finalize(() => {
+            if (isMultiple) {
+              completedUploads++;
+              const progressPercentage = Math.round((completedUploads / totalFiles) * 100);
+              this.progress.set(progressPercentage);
+
+              if (completedUploads === totalFiles) {
+                this.completeUpload();
+              }
+            } else {
+              this.completeUpload();
+            }
+          })
+        )
+        .subscribe((event) => {
+          if (event.type === HttpEventType.UploadProgress && event.total) {
+            this.progress.set(Math.round((event.loaded / event.total) * 100));
+          }
+        });
+    });
+  }
 
-    this.filesService
-      .uploadFile(file, uploadLink)
-      .pipe(
-        takeUntilDestroyed(this.destroyRef),
-        finalize(() => {
-          this.fileIsUploading.set(false);
-          this.fileName.set('');
-          this.updateFilesList();
-        })
-      )
-      .subscribe((event) => {
-        if (event.type === HttpEventType.UploadProgress && event.total) {
-          this.progress.set(Math.round((event.loaded / event.total) * 100));
-        }
-      });
+  private completeUpload(): void {
+    this.fileIsUploading.set(false);
+    this.fileName.set('');
+    this.updateFilesList();
   }
 
   onFileSelected(event: Event): void {
     const input = event.target as HTMLInputElement;
-    const file = input.files?.[0];
-    if (!file) return;
+    const files = input.files;
+    if (!files || files.length === 0) return;
 
-    this.uploadFile(file);
+    this.uploadFiles(Array.from(files));
   }
 
   createFolder(): void {

src/app/features/registries/components/files-control/files-control.component.html

@@ -63,7 +63,7 @@
       [provider]="provider()"
       (folderIsOpening)="folderIsOpening($event)"
       (entryFileClicked)="selectFile($event)"
-      (uploadFileConfirmed)="uploadFile($event)"
+      (uploadFilesConfirmed)="uploadFiles($event)"
     >
     </osf-files-tree>
   </div>

src/app/features/registries/components/files-control/files-control.component.ts

@@ -124,7 +124,7 @@ export class FilesControlComponent implements OnDestroy {
     }
     if (!file) return;
 
-    this.uploadFile(file);
+    this.uploadFiles(file);
   }
 
   createFolder(): void {
@@ -166,7 +166,9 @@ export class FilesControlComponent implements OnDestroy {
     return EMPTY;
   }
 
-  uploadFile(file: File): void {
+  uploadFiles(files: File | File[]): void {
+    const fileArray = Array.isArray(files) ? files : [files];
+    const file = fileArray[0];
     const currentFolder = this.currentFolder();
     const uploadLink = currentFolder?.links.upload;
     if (!uploadLink) return;

src/app/shared/components/files-tree/files-tree.component.ts

@@ -88,7 +88,7 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit {
 
   entryFileClicked = output<OsfFile>();
   folderIsOpening = output<boolean>();
-  uploadFileConfirmed = output<File>();
+  uploadFilesConfirmed = output<File[] | File>();
   filesPageChange = output<number>();
 
   foldersStack: OsfFile[] = [];
@@ -163,12 +163,15 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit {
     const files = event.dataTransfer?.files;
 
     if (files && files.length > 0) {
+      const fileArray = Array.from(files);
+      const isMultiple = files.length > 1;
+
       this.customConfirmationService.confirmAccept({
-        headerKey: 'files.dialogs.uploadFile.title',
-        messageParams: { name: files[0].name },
-        messageKey: 'files.dialogs.uploadFile.message',
+        headerKey: isMultiple ? 'files.dialogs.uploadFiles.title' : 'files.dialogs.uploadFile.title',
+        messageParams: isMultiple ? { count: files.length } : { name: files[0].name },
+        messageKey: isMultiple ? 'files.dialogs.uploadFiles.message' : 'files.dialogs.uploadFile.message',
         acceptLabelKey: 'common.buttons.upload',
-        onConfirm: () => this.uploadFileConfirmed.emit(files[0]),
+        onConfirm: () => this.uploadFilesConfirmed.emit(fileArray),
       });
     }
   }