[incubator-streampipes] branch dev updated: [STREAMPIPES-570] Support multiple file uploads in file management

[ri...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git


The following commit(s) were added to refs/heads/dev by this push:
     new f06f1b1c6 [STREAMPIPES-570] Support multiple file uploads in file management
f06f1b1c6 is described below

commit f06f1b1c6723ea0eab829d03482983ba0f2c5064
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Tue Aug 2 22:32:36 2022 +0200

    [STREAMPIPES-570] Support multiple file uploads in file management
---
 .../file-upload/file-upload-dialog.component.html  | 17 +++++---
 .../file-upload/file-upload-dialog.component.ts    | 50 ++++++++++++++--------
 2 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html
index f5961a6d4..ed88a66e4 100644
--- a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html
+++ b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html
@@ -22,12 +22,12 @@
         <div fxFlex="100">
             <div fxFlex="100" style="margin:5px;width:100%">
                 <mat-form-field style="width: 95%" (click)="fileInput.click();" color="accent">
-                    <input matInput placeholder="File" disabled (value)="fileName">
+                    <input matInput placeholder="File" disabled (value)="fileNames">
                     <input #fileInput type="file" style="display:none;"
                            (change)="handleFileInput($event.target.files)"
-                           data-cy="sp-file-management-file-input">
+                           data-cy="sp-file-management-file-input" multiple>
                     <div>
-                        {{fileName}}
+                        <div fxLayout="column" *ngFor="let filename of fileNames">{{filename}}</div>
                         <mat-progress-bar mode="determinate" value="{{uploadStatus}}" *ngIf="uploadStatus > 0" color="accent"></mat-progress-bar>
                     </div>
                     <button color="accent" matSuffix
@@ -39,13 +39,20 @@
                         {{errorMessage}}
                     </mat-error>
                 </mat-form-field>
+                <button mat-button mat-raised-button class="mat-basic" (click)="removeFilesFromUpload()">Clear</button>
             </div>
         </div>
     </div>
     <mat-divider></mat-divider>
     <div class="sp-dialog-actions">
-        <button mat-button mat-raised-button color="accent" (click)="store()" data-cy="sp-file-management-store-file" style="margin-right:10px;">
-            Store file
+        <button mat-button
+                mat-raised-button
+                color="accent"
+                (click)="store()"
+                [disabled]="fileNames.length === 0"
+                data-cy="sp-file-management-store-file"
+                style="margin-right:10px;">
+            Import files
         </button>
         <button mat-button mat-raised-button class="mat-basic" (click)="cancel()" style="margin-right:10px;">
             Cancel
diff --git a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts
index d3a9e42e6..0df31b1bf 100644
--- a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts
+++ b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts
@@ -29,9 +29,9 @@ import { FilesService } from '@streampipes/platform-services';
 export class FileUploadDialogComponent implements OnInit {
 
   inputValue: string;
-  fileName: string;
+  fileNames: string[] = [];
 
-  selectedUploadFile: File;
+  selectedUploadFiles: FileList;
 
   hasInput: boolean;
   errorMessage = 'Please enter a value';
@@ -46,29 +46,45 @@ export class FileUploadDialogComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  handleFileInput(files: any) {
-    this.selectedUploadFile = files[0];
-    this.fileName = this.selectedUploadFile.name;
+  handleFileInput(files: FileList) {
+    this.selectedUploadFiles = files;
+    for (let i = 0; i < files.length; i++) {
+      this.fileNames.push(files.item(i).name);
+    }
     this.uploadStatus = 0;
   }
 
+  removeFilesFromUpload(): void {
+    this.selectedUploadFiles = undefined;
+    this.fileNames = [];
+  }
+
   store() {
     this.uploadStatus = 0;
-    if (this.selectedUploadFile !== undefined) {
-      this.filesService.uploadFile(this.selectedUploadFile).subscribe(
-          event => {
-            if (event.type === HttpEventType.UploadProgress) {
-              this.uploadStatus = Math.round(100 * event.loaded / event.total);
-            } else if (event instanceof HttpResponse) {
-              this.dialogRef.close();
-            }
-          },
-          error => {
-          },
-      );
+    if (this.selectedUploadFiles.length > 0) {
+      this.uploadFile(0);
     }
   }
 
+  uploadFile(index: number): void {
+    this.filesService.uploadFile(this.selectedUploadFiles.item(index)).subscribe(
+      event => {
+        if (event.type === HttpEventType.UploadProgress) {
+          this.uploadStatus = Math.round(100 * event.loaded / event.total);
+        } else if (event instanceof HttpResponse) {
+          index++;
+          if (index === (this.selectedUploadFiles.length)) {
+            this.dialogRef.close();
+          } else {
+            this.uploadFile(index);
+          }
+        }
+      },
+      error => {
+      },
+    );
+  }
+
   cancel() {
     this.dialogRef.close();
   }