Merge pull request #701 from CruGlobal/GT-1721-upload-mulitple-images

Gt 1721 upload mulitple images
CruGlobal · Feb 12, 2024 · 2720ff9 · 2720ff9
2 parents 854a52f + 50ceecc
commit 2720ff9
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 37 deletions.
diff --git a/src/app/components/attachments/attachments.component.html b/src/app/components/attachments/attachments.component.html
@@ -46,29 +46,20 @@ <h5>Instructions</h5>
       </ul>
       <hr />
     </div>
-    <h5>Upload new attachment</h5>
+    <h5>Upload new attachments</h5>
     <div class="input-group mb-3">
       <div class="custom-file">
         <input
           type="file"
           ng2FileSelect
           [uploader]="uploader"
+          multiple
           #uploadElement
           class="custom-file-input"
           id="newAttachment"
-          (change)="fileUploaderOnChange()"
         />
-        <label
-          class="custom-file-label"
-          for="newAttachment"
-          *ngIf="fileName != ''"
-          >{{ fileName }}</label
-        >
-        <label
-          class="custom-file-label"
-          for="newAttachment"
-          *ngIf="fileName == ''"
-          >Choose file</label
+        <label class="custom-file-label" for="newAttachment"
+          >Choose files</label
         >
       </div>
       <select [(ngModel)]="selectedResource" class="custom-select">
@@ -77,23 +68,120 @@ <h5>Upload new attachment</h5>
           {{ resource.name }}
         </option>
       </select>
-      <div class="input-group-append">
-        <button (click)="uploadNewFile()" class="btn btn-success">
-          <i class="fa fa-cloud-upload"></i> Upload
+    </div>
+
+    <h5>Upload queue</h5>
+    <p>Queue length: {{ uploader?.queue?.length }}</p>
+    <table class="table">
+      <thead>
+        <tr>
+          <th width="50%">Name</th>
+          <th>Size</th>
+          <th>Progress</th>
+          <th>Status</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let item of uploader.queue">
+          <td>
+            <strong>{{ item?.file?.name }}</strong>
+          </td>
+          <td *ngIf="uploader.options.isHTML5" nowrap>
+            {{ item?.file?.size / 1024 / 1024 | number: '.2' }} MB
+          </td>
+          <td *ngIf="uploader.options.isHTML5">
+            <div class="progress" style="margin-bottom: 0">
+              <div
+                class="progress-bar"
+                role="progressbar"
+                [ngStyle]="{ width: item.progress + '%' }"
+              ></div>
+            </div>
+          </td>
+          <td class="text-center">
+            <span *ngIf="item.isSuccess" class="text-success"
+              ><i class="fa fa-check-circle"></i
+            ></span>
+            <span *ngIf="item.isCancel" class="text-warning"
+              ><i class="fa fa-ban"></i
+            ></span>
+            <span *ngIf="item.isError" class="text-danger"
+              ><i class="fa fa-exclamation-triangle"></i
+            ></span>
+          </td>
+          <td nowrap>
+            <button
+              type="button"
+              class="btn btn-success"
+              (click)="item.upload()"
+              [disabled]="item.isReady || item.isUploading || item.isSuccess"
+            >
+              <span class="glyphicon glyphicon-upload"></span> Upload
+            </button>
+            <button
+              type="button"
+              class="btn btn-warning"
+              (click)="item.cancel()"
+              [disabled]="!item.isUploading"
+            >
+              <span class="glyphicon glyphicon-ban-circle"></span> Cancel
+            </button>
+            <button
+              type="button"
+              class="btn btn-danger"
+              (click)="item.remove()"
+            >
+              <span class="glyphicon glyphicon-trash"></span> Remove
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div>
+      <ngb-alert type="info" [dismissible]="false" *ngIf="uploader.isUploading">
+        Uploading...
+      </ngb-alert>
+      <ngb-alert type="success" [dismissible]="false" *ngIf="success">
+        Success!
+      </ngb-alert>
+    </div>
+    <div class="btn-toolbar justify-content-between">
+      <button
+        type="button"
+        class="btn btn-danger"
+        (click)="uploader.clearQueue()"
+        [disabled]="!uploader.queue.length"
+      >
+        <i class="fa fa-trash"></i> Remove all
+      </button>
+      <div>
+        <button
+          type="button"
+          class="btn btn-warning"
+          (click)="uploader.cancelAll()"
+          [disabled]="!uploader.isUploading"
+        >
+          <i class="fa fa-ban"></i> Cancel all
+        </button>
+        <button
+          type="button"
+          class="btn btn-success ml-2"
+          (click)="uploadNewFile()"
+          [disabled]="!uploader.getNotUploadedItems().length"
+        >
+          <i class="fa fa-cloud-upload"></i> Upload all
         </button>
       </div>
     </div>
-
-    <ngb-alert type="info" [dismissible]="false" *ngIf="uploader.isUploading">
-      Uploading...
-    </ngb-alert>
-    <ngb-alert type="success" [dismissible]="false" *ngIf="success">
-      Success!
-    </ngb-alert>
   </div>
 </div>
-<ngb-alert type="danger" [dismissible]="false" *ngIf="errorMessage">
-  {{ errorMessage }}
+<ngb-alert
+  type="danger"
+  [dismissible]="false"
+  *ngFor="let error of errorMessages"
+>
+  {{ error }}
 </ngb-alert>
 <ngb-alert type="warning" [dismissible]="false" *ngIf="loading">
   Loading...

diff --git a/src/app/components/attachments/attachments.component.spec.ts b/src/app/components/attachments/attachments.component.spec.ts
@@ -73,9 +73,7 @@ describe('AttachmentsComponent', () => {
   it('includes auth header with file uploads', () => {
     spyOn(comp.uploader, 'uploadAll');
 
-    fixture.debugElement
-      .query(By.css('.btn.btn-success'))
-      .nativeElement.click();
+    comp.uploadNewFile();
 
     expect(comp.uploader.authToken).toBe(authToken);
   });

diff --git a/src/app/components/attachments/attachments.component.ts b/src/app/components/attachments/attachments.component.ts
@@ -26,7 +26,7 @@ export class AttachmentsComponent implements OnInit {
   showInstructions = false;
   loading = false;
   success = false;
-  errorMessage: string;
+  errorMessages: string[];
   fileName: String = '';
 
   constructor(
@@ -46,15 +46,13 @@ export class AttachmentsComponent implements OnInit {
     };
 
     this.uploader.onErrorItem = (item, response, status, headers) => {
-      this.errorMessage = JSON.parse(response).errors[0].detail;
+      const errorText =
+        JSON.parse(response).errors[0].detail || 'Unknown error occured';
+      this.errorMessages = [...this.errorMessages, errorText];
       return { item, response, status, headers };
     };
   }
 
-  fileUploaderOnChange(): void {
-    this.fileName = this.uploadElement.nativeElement.files[0].name;
-  }
-
   private loadAttachments(): void {
     this.loading = true;
 
@@ -71,8 +69,7 @@ export class AttachmentsComponent implements OnInit {
   }
 
   uploadNewFile(): void {
-    this.errorMessage = null;
-    this.uploadElement.nativeElement.value = '';
+    this.errorMessages = [];
 
     const resourceId = this.selectedResource ? this.selectedResource.id : null;
 
@@ -111,6 +108,6 @@ export class AttachmentsComponent implements OnInit {
   }
 
   private handleError(message: string): void {
-    this.errorMessage = message;
+    this.errorMessages = [message];
   }
 }