Merge pull request #125 from rpaschoal/2.0.4

Merge from 2.0.4
rpaschoal · May 10, 2019 · 4586f79 · 4586f79
2 parents e62416a + 75cae89
commit 4586f79
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 42 deletions.
diff --git a/demo/offline_bot/package.json b/demo/offline_bot/package.json
@@ -24,7 +24,7 @@
     "core-js": "^2.5.7",
     "rxjs": "^6.3.3",
     "zone.js": "^0.8.26",
-    "ng-chat": "^2.0.3"
+    "ng-chat": "^2.0.4"
   },
   "devDependencies": {
     "@angular/cli": "^7.0.4",

diff --git a/src/ng-chat/ng-chat.component.html b/src/ng-chat/ng-chat.component.html
@@ -108,11 +108,16 @@
 
                 <!-- File Upload -->
                 <ng-container *ngIf="fileUploadAdapter">
-                    <a *ngIf="!isUploadingFile" class="btn-add-file" (click)="triggerNativeFileUpload()">
+                    <a *ngIf="!isUploadingFile(window)" class="btn-add-file" (click)="triggerNativeFileUpload(window)">
                         <i class="upload-icon"></i>
                     </a>
-                    <input type="file" #nativeFileInput style="display: none;" (change)="onFileChosen(window)" />
-                    <div *ngIf="isUploadingFile" class="loader"></div>
+                    <input 
+                        type="file" 
+                        #nativeFileInput 
+                        style="display: none;" 
+                        [attr.id]="getUniqueFileUploadInstanceId(window)" 
+                        (change)="onFileChosen(window)" />
+                    <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[] = [];
@@ -231,7 +231,7 @@ export class NgChat implements OnInit, IChatController {
 
     @ViewChildren('chatWindowInput') chatWindowInputs: any;
 
-    @ViewChild('nativeFileInput') nativeFileInput: ElementRef;
+    @ViewChildren('nativeFileInput') nativeFileInputs: ElementRef[];
 
     ngOnInit() { 
         this.bootstrapChat();
@@ -891,41 +891,81 @@ export class NgChat implements OnInit, IChatController {
         }
     }
 
+    // Generates a unique file uploader id for each participant
+    getUniqueFileUploadInstanceId(window: Window): string
+    {
+        if (window && window.participant)
+        {
+            return `ng-chat-file-upload-${window.participant.id}`;
+        }
+
+        return 'ng-chat-file-upload';
+    }
+
     // Triggers native file upload for file selection from the user
-    triggerNativeFileUpload(): void
+    triggerNativeFileUpload(window: Window): void
+    {
+        if (window)
+        {
+            const fileUploadInstanceId = this.getUniqueFileUploadInstanceId(window);
+            const uploadElementRef = this.nativeFileInputs.filter(x => x.nativeElement.id === fileUploadInstanceId)[0];
+
+            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
     {
-        this.nativeFileInput.nativeElement.click();
+        const fileUploadInstanceId = this.getUniqueFileUploadInstanceId(window);
+
+        return this.fileUploadersInUse.indexOf(fileUploadInstanceId) > -1;
     }
 
     // Handles file selection and uploads the selected file using the file upload adapter
     onFileChosen(window: Window): void {
-        const file: File = this.nativeFileInput.nativeElement.files[0];
+        const fileUploadInstanceId = this.getUniqueFileUploadInstanceId(window);
+        const uploadElementRef = this.nativeFileInputs.filter(x => x.nativeElement.id === fileUploadInstanceId)[0];
 
-        this.isUploadingFile = true;
+        if (uploadElementRef)
+        {
+            const file: File = uploadElementRef.nativeElement.files[0];
 
-        this.fileUploadAdapter.uploadFile(file, window.participant.id)
-            .subscribe(fileMessage => {
-                this.isUploadingFile = false;
+            this.fileUploadersInUse.push(fileUploadInstanceId);
 
-                fileMessage.fromId = this.userId;
+            this.fileUploadAdapter.uploadFile(file, window.participant.id)
+                .subscribe(fileMessage => {
+                    this.clearInUseFileUploader(fileUploadInstanceId);
 
-                // Push file message to current user window   
-                window.messages.push(fileMessage);
-
-                this.adapter.sendMessage(fileMessage);
-
-                this.scrollChatWindow(window, ScrollDirection.Bottom);
+                    fileMessage.fromId = this.userId;
 
-                // Resets the file upload element
-                this.nativeFileInput.nativeElement.value = '';
-            }, (error) => {
-                this.isUploadingFile = false;
+                    // Push file message to current user window   
+                    window.messages.push(fileMessage);
+
+                    this.adapter.sendMessage(fileMessage);
+
+                    this.scrollChatWindow(window, ScrollDirection.Bottom);
 
-                // Resets the file upload element
-                this.nativeFileInput.nativeElement.value = '';
+                    // Resets the file upload element
+                    uploadElementRef.nativeElement.value = '';
+                }, (error) => {
+                    this.clearInUseFileUploader(fileUploadInstanceId);
 
-                // TODO: Invoke a file upload adapter error here
-            });
+                    // Resets the file upload element
+                    uploadElementRef.nativeElement.value = '';
+
+                    // TODO: Invoke a file upload adapter error here
+                });
+        }
     }
 
     onFriendsListCheckboxChange(selectedUser: User, isChecked: boolean): void

diff --git a/src/package.json b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-chat",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/core": "*",

diff --git a/src/spec/ng-chat.component.spec.ts b/src/spec/ng-chat.component.spec.ts
@@ -1545,34 +1545,46 @@ describe('NgChat', () => {
         expect(spy).not.toHaveBeenCalled();
     });
 
-    it('Exercise for "onFileChosen" event', () => {
-        let mockedFileMessageServerResponse = new FileMessage();
+    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');
-        let scrollSpy = spyOn(subject, 'scrollChatWindow');
-
-        let chattingTo = new User();
-        chattingTo.id = 88;
 
-        let chatWindow = new Window(chattingTo, false, false);
+        spyOn(MockableAdapter.prototype, 'sendMessage');
+        const scrollSpy = spyOn(subject, 'scrollChatWindow');
 
-        let fakeFile = new File([''], 'filename', { type: 'text/html' });
+        const fakeFile = new File([''], 'filename', { type: 'text/html' });
 
-        let fakeFileElement = {
+        const fakeFileElement = {
             nativeElement:
             {
+                id: `ng-chat-file-upload-${chattingTo.id}`,
                 value: 'test',
                 files: [fakeFile]
             }
         }
 
-        subject.nativeFileInput = fakeFileElement;
+        // Should be filtered and ignored
+        const anotherFakeFileElement = { 
+            nativeElement:
+            {
+                id: `ng-chat-file-upload-${123}`,
+                value: 'test',
+                files: []
+            }
+        }
+
+        subject.nativeFileInputs = [anotherFakeFileElement, fakeFileElement];
         subject.fileUploadAdapter = new MockableFileUploadAdapter();
 
         subject.onFileChosen(chatWindow);
@@ -1585,7 +1597,8 @@ describe('NgChat', () => {
         expect(scrollSpy).toHaveBeenCalledTimes(1);
         expect(scrollSpy.calls.mostRecent().args[1]).toBe(ScrollDirection.Bottom);
         expect(fakeFileElement.nativeElement.value).toBe('');
-        expect(subject.isUploadingFile).toBeFalsy();
+        expect(anotherFakeFileElement.nativeElement.value).toBe('test');
+        expect(subject.isUploadingFile(chatWindow)).toBeFalsy();
     });
 
     it('Assert message type must default to text when no message type is defined in a message instance', () => {