Make file uploader statuses independent

rpaschoal · May 10, 2019 · 6527e8b · 6527e8b
1 parent 564539c
commit 6527e8b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/src/ng-chat/ng-chat.component.html b/src/ng-chat/ng-chat.component.html
@@ -108,7 +108,7 @@
 
                 <!-- File Upload -->
                 <ng-container *ngIf="fileUploadAdapter">
-                    <a *ngIf="!isUploadingFile" class="btn-add-file" (click)="triggerNativeFileUpload(getUniqueFileUploadInstanceId(window))">
+                    <a *ngIf="!isUploadingFile(window)" class="btn-add-file" (click)="triggerNativeFileUpload(window)">
                         <i class="upload-icon"></i>
                     </a>
                     <input 
@@ -117,7 +117,7 @@
                         style="display: none;" 
                         [attr.id]="getUniqueFileUploadInstanceId(window)" 
                         (change)="onFileChosen(window)" />
-                    <div *ngIf="isUploadingFile" class="loader"></div>
+                    <div *ngIf="isUploadingFile(window)" class="loader"></div>
                 </ng-container>
             </div>
         </ng-container>

diff --git a/src/ng-chat/ng-chat.component.ts b/src/ng-chat/ng-chat.component.ts
@@ -220,7 +220,7 @@ export class NgChat implements OnInit, IChatController {
     public unsupportedViewport: boolean = false;
 
     // File upload state
-    public isUploadingFile = false;
+    public fileUploadersInUse: string[] = []; // Id bucket of uploaders in use
     public fileUploadAdapter: IFileUploadAdapter;
 
     windows: Window[] = [];
@@ -903,12 +903,32 @@ export class NgChat implements OnInit, IChatController {
     }
 
     // Triggers native file upload for file selection from the user
-    triggerNativeFileUpload(fileUploadInstanceId: string): void
+    triggerNativeFileUpload(window: Window): void
     {
-        const uploadElementRef = this.nativeFileInputs.filter(x => x.nativeElement.id === fileUploadInstanceId)[0];
+        if (window)
+        {
+            const fileUploadInstanceId = this.getUniqueFileUploadInstanceId(window);
+            const uploadElementRef = this.nativeFileInputs.filter(x => x.nativeElement.id === fileUploadInstanceId)[0];
 
-        if (uploadElementRef)
-        uploadElementRef.nativeElement.click();
+            if (uploadElementRef)
+            uploadElementRef.nativeElement.click();
+        }
+    }
+
+    private clearInUseFileUploader(fileUploadInstanceId: string): void
+    {
+        const uploaderInstanceIdIndex = this.fileUploadersInUse.indexOf(fileUploadInstanceId);
+
+        if (uploaderInstanceIdIndex > -1) {
+            this.fileUploadersInUse.splice(uploaderInstanceIdIndex, 1);
+        }
+    }
+
+    isUploadingFile(window: Window): boolean
+    {
+        const fileUploadInstanceId = this.getUniqueFileUploadInstanceId(window);
+
+        return this.fileUploadersInUse.indexOf(fileUploadInstanceId) > -1;
     }
 
     // Handles file selection and uploads the selected file using the file upload adapter
@@ -920,11 +940,11 @@ export class NgChat implements OnInit, IChatController {
         {
             const file: File = uploadElementRef.nativeElement.files[0];
 
-            this.isUploadingFile = true;
+            this.fileUploadersInUse.push(fileUploadInstanceId);
 
             this.fileUploadAdapter.uploadFile(file, window.participant.id)
                 .subscribe(fileMessage => {
-                    this.isUploadingFile = false;
+                    this.clearInUseFileUploader(fileUploadInstanceId);
 
                     fileMessage.fromId = this.userId;
 
@@ -938,7 +958,7 @@ export class NgChat implements OnInit, IChatController {
                     // Resets the file upload element
                     uploadElementRef.nativeElement.value = '';
                 }, (error) => {
-                    this.isUploadingFile = false;
+                    this.clearInUseFileUploader(fileUploadInstanceId);
 
                     // Resets the file upload element
                     uploadElementRef.nativeElement.value = '';

diff --git a/src/spec/ng-chat.component.spec.ts b/src/spec/ng-chat.component.spec.ts
@@ -1548,20 +1548,21 @@ describe('NgChat', () => {
     it('Should filter by file instance id and upload file when a file upload "onFileChosen" event is triggered', () => {
         const mockedFileMessageServerResponse = new FileMessage();
 
+        const chattingTo = new User();
+        chattingTo.id = 88;
+
+        const chatWindow = new Window(chattingTo, false, false);
+
         spyOn(MockableFileUploadAdapter.prototype, 'uploadFile').and.callFake(() => {
             // At this stage the 'isUploadingFile' should be true
-            expect(subject.isUploadingFile).toBeTruthy();
+            expect(subject.isUploadingFile(chatWindow)).toBeTruthy();
 
             return of(mockedFileMessageServerResponse);
         });
+
         spyOn(MockableAdapter.prototype, 'sendMessage');
         const scrollSpy = spyOn(subject, 'scrollChatWindow');
 
-        const chattingTo = new User();
-        chattingTo.id = 88;
-
-        const chatWindow = new Window(chattingTo, false, false);
-
         const fakeFile = new File([''], 'filename', { type: 'text/html' });
 
         const fakeFileElement = {
@@ -1597,7 +1598,7 @@ describe('NgChat', () => {
         expect(scrollSpy.calls.mostRecent().args[1]).toBe(ScrollDirection.Bottom);
         expect(fakeFileElement.nativeElement.value).toBe('');
         expect(anotherFakeFileElement.nativeElement.value).toBe('test');
-        expect(subject.isUploadingFile).toBeFalsy();
+        expect(subject.isUploadingFile(chatWindow)).toBeFalsy();
     });
 
     it('Assert message type must default to text when no message type is defined in a message instance', () => {