fix: fix file drop to support click to upload

doubtfire-lms · Aug 30, 2023 · 599cd9e · 599cd9e
1 parent 199311b
commit 599cd9e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 25 deletions.
diff --git a/src/app/common/file-drop/file-drop.component.html b/src/app/common/file-drop/file-drop.component.html
@@ -23,9 +23,8 @@
       <div class="flex ml-4 h-[48px] items-center">
         <mat-icon class="mr-2" *ngIf="file?.name">upload_file</mat-icon>
         <span class="truncate grow max-w-xs mt-[4px]"> {{ file?.name || message }} </span>
-
+        {{ uploadProgress }}
         <button
-          *ngIf="isUploadMode"
           [disabled]="!file?.name"
           class="ml-auto"
           mat-icon-button

diff --git a/src/app/common/file-drop/file-drop.component.ts b/src/app/common/file-drop/file-drop.component.ts
@@ -2,6 +2,7 @@ import { HttpClient, HttpErrorResponse, HttpEventType } from '@angular/common/ht
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Subscription, throwError } from 'rxjs';
 import { AlertService } from '../services/alert.service';
+import { TeachingPeriodService } from 'src/app/api/services/teaching-period.service';
 
 /**
  * Allow files to be dropped for upload
@@ -12,6 +13,8 @@ import { AlertService } from '../services/alert.service';
   styleUrls: ['file-drop.component.scss'],
 })
 export class FileDropComponent {
+  @Input({ required: true }) mode: 'endpoint' | 'event';
+
   /** The name of the file(s) you are asking the user to upload */
   @Input() desiredFileName: string;
 
@@ -21,7 +24,7 @@ export class FileDropComponent {
   /** The file types that are allowed to be uploaded */
   @Input() accept: string;
 
-  /** The URL of the endpoint to POST the file to */
+  /** The URL of the endpoint to POST the file to if mode is endpoint*/
   @Input() endpoint: string;
   @Input() body: object;
   @Output() fileChange = new EventEmitter<File>();
@@ -33,7 +36,7 @@ export class FileDropComponent {
    */
   protected file: File;
   /**
-   * Report all files dropped
+   * Report all files dropped if mode is event
    */
   @Output() filesDropped = new EventEmitter<File[]>();
 
@@ -66,30 +69,34 @@ export class FileDropComponent {
         return;
       }
     }
-
-    this.filesDropped.emit(droppedFiles);
     this.file = files[0];
+    this.upload();
   }
 
   public upload() {
-    if (this.file) {
-      const formData = new FormData();
-
-      formData.append('file', this.file);
-      this.http.post(this.endpoint, formData, { reportProgress: true, observe: 'events' }).subscribe(
-        (data) => {
-          if (data.type == HttpEventType.UploadProgress) {
-            this.uploadProgress = Math.round(100 * (data.loaded / data.total));
-          }
-          if (data.type == HttpEventType.Response) {
-            if (data.ok) {
-              this.alert.success(`File uploaded successfully`);
+    if (this.mode == 'endpoint') {
+      if (this.file) {
+        const formData = new FormData();
+
+        formData.append('file', this.file);
+        this.http.post(this.endpoint, formData, { reportProgress: true, observe: 'events' }).subscribe(
+          (data) => {
+            if (data.type == HttpEventType.UploadProgress) {
+              this.uploadProgress = Math.round(100 * (data.loaded / data.total));
             }
-          }
-        },
-        (error) => this.handleError(error),
-        () => this.reset(),
-      );
+            if (data.type == HttpEventType.Response) {
+              if (data.ok) {
+                this.alert.success(`File uploaded successfully`);
+              }
+            }
+          },
+          (error) => this.handleError(error),
+          () => this.reset(),
+        );
+      }
+    } else {
+      this.filesDropped.emit([this.file])
+      this.reset();
     }
   }
 

diff --git a/...task-definition-editor/task-definition-resources/task-definition-resources.component.html b/...task-definition-editor/task-definition-resources/task-definition-resources.component.html
@@ -1,13 +1,13 @@
 <div class="flex flex-row gap-4">
   <div class="basis-1/2 flex flex-col">
-    <f-file-drop (filesDropped)="uploadTaskSheet($event)" accept="application/pdf" [desiredFileName]="'Task ' + taskDefinition.abbreviation + ' pdf'" />
+    <f-file-drop mode="event" (filesDropped)="uploadTaskSheet($event)" accept="application/pdf" [desiredFileName]="'Task ' + taskDefinition.abbreviation + ' pdf'" />
     <div *ngIf="taskDefinition.hasTaskSheet" class="flex flex-row gap-4 pt-4">
       <button mat-flat-button color="accent" (click)="downloadTaskSheet()" class="flex-grow ms-4">Download Task Sheet</button>
       <button mat-flat-button color="warn" (click)="removeTaskSheet()" class="flex-grow me-4">Delete Task Sheet</button>
     </div>
   </div>
   <div class="basis-1/2 flex flex-col">
-    <f-file-drop (filesDropped)="uploadTaskResources($event)" accept="application/pdf" [desiredFileName]="'Task ' + taskDefinition.abbreviation + ' zip'" />
+    <f-file-drop mode="event" (filesDropped)="uploadTaskResources($event)" accept="application/pdf" [desiredFileName]="'Task ' + taskDefinition.abbreviation + ' zip'" />
     <div *ngIf="taskDefinition.hasTaskResources" class="flex flex-row gap-4 pt-4">
       <button mat-flat-button color="accent" (click)="downloadTaskResources()" class="flex-grow ms-4">Download Task Zip</button>
       <button mat-flat-button color="warn" (click)="removeTaskResources()" class="flex-grow me-4">Delete Task Zip</button>