#29 - allow uploading multiple files; ajax upload w/o reloading page

src/app/components/editor/files/files.component.html

@@ -1,7 +1,7 @@
 <div class="files-wrapper" *ngIf="!notAvailableOffline">
     <div class="new-uploads" style="margin: 20px;" *ngIf="!readonly">
         <form #uploadForm [action]="getApiSubmit()" enctype="multipart/form-data" method="post">
-            <input style="margin-top: 10px;" type="file" id="file" name="uploaded_file">
+            <input style="margin-top: 10px;" type="file" id="file" name="uploaded_file" #fileUploader (change)="onFileChange($event)" multiple>
             <input type="hidden" name="redirectTo" [value]="getReturnUrl()">
             <ion-button (click)="onSubmitClick()" type="submit" fill="outline" class="ion-margin-start">Upload</ion-button>
         </form>

src/app/components/editor/files/files.component.ts

@@ -3,6 +3,7 @@ import {ApiService, ResourceNotAvailableOfflineError} from '../../../service/api
 import { APP_BASE_HREF } from '@angular/common';
 import {EditorService} from '../../../service/editor.service';
 import {EditorNodeContract} from '../../nodes/EditorNode.contract';
+import {HttpClient} from '@angular/common/http';
 
 @Component({
   selector: 'editor-files',
@@ -13,6 +14,7 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
   @Input() nodeId: string;
   @Input() editorUUID: string;
   @ViewChild('uploadForm') uploadForm: ElementRef;
+  @ViewChild('fileUploader') fileUploader: ElementRef;
 
   public fileRecords: Array<any> = [];
   public pendingSetup = true;
@@ -26,6 +28,7 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
 
   constructor(
       protected api: ApiService,
+      protected http: HttpClient,
       public editorService: EditorService,
       @Inject(APP_BASE_HREF) private baseHref: string
   ) { super(); }
@@ -69,6 +72,7 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
     }
 
     this.pendingSetup = false;
+    this.fileUploader.nativeElement.value = null;
   }
 
   public async performDelete(): Promise<void> {
@@ -91,9 +95,34 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
       return;
     }
 
-    this.uploadForm.nativeElement.submit();
+    const fileList: FileList = this.fileUploader?.nativeElement?.files;
+    if ( !fileList ) {
+      return;
+    }
+
+    if ( fileList.length > 0 ) {
+      const formData: FormData = new FormData();
+
+      // tslint:disable-next-line:prefer-for-of
+      for ( let i = 0; i < fileList.length; i += 1 ) {
+        const file = fileList[i];
+        formData.append(`uploaded_file_${i}`, file, file.name);
+      }
+
+      this.http.post(this.getApiSubmit(), formData).subscribe({
+        next: data => {
+          this.performLoad();
+        },
+        error: error => {
+          console.error(error);
+          this.performLoad();
+        },
+      });
+    }
   }
 
+  onFileChange(event) {}
+
   getReturnUrl() {
     return `${this.baseHref}editor;id=${this.page.UUID}`;
   }