Merge pull request #413 from GetStream/custom-attachment-upload

feat: Add custom attachment upload template to message input

Author: szuperaz

docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx

@@ -2,6 +2,12 @@ import Screenshot from "../assets/attachment-preview-list-screenshot.png";
 
 The `AttachmentPreviewList` component displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.
 
+The following attachment types are supported:
+
+- Images - displayed inline
+- Video files - no preview provided inside the message input, but displayed inline inside the message list
+- Other files - no preview provided, users can download the uploaded files
+
 **Example 1** - attachment previews
 
 <img src={Screenshot} width="1000" />

projects/customizations-example/src/app/app.component.html

@@ -234,3 +234,18 @@
 <ng-template #customChannelInfo let-channel="channel">
   This channel has {{ channel?.data?.member_count }} members
 </ng-template>
+
+<!-- Message inputs use separate AttachmentService instances and component-tree based DI lookup doesn't work with content injection so we need to provide the AttachmentService as an input -->
+<ng-template
+  #customAttachmentUpload
+  let-isMultipleFileUploadEnabled="isMultipleFileUploadEnabled"
+  let-attachmentService="attachmentService"
+>
+  <input
+    #fileInput
+    type="file"
+    [multiple]="isMultipleFileUploadEnabled"
+    (change)="filesSelected(fileInput.files, attachmentService)"
+  />
+  <button (click)="addRandomImage(attachmentService)">Random image</button>
+</ng-template>

projects/customizations-example/src/app/app.component.ts

@@ -4,8 +4,11 @@ import {
   TemplateRef,
   ViewChild,
 } from '@angular/core';
-import { ChannelHeaderInfoContext } from 'projects/stream-chat-angular/src/public-api';
-import { Channel } from 'stream-chat';
+import {
+  AttachmentService,
+  ChannelHeaderInfoContext,
+} from 'projects/stream-chat-angular/src/public-api';
+import { Attachment, Channel } from 'stream-chat';
 import {
   ChatClientService,
   ChannelService,
@@ -31,6 +34,7 @@ import {
   ModalContext,
   NotificationContext,
   ThreadHeaderContext,
+  CustomAttachmentUploadContext,
 } from 'stream-chat-angular';
 import { environment } from '../environments/environment';
 
@@ -82,6 +86,8 @@ export class AppComponent implements AfterViewInit {
   private threadHeaderTemplate!: TemplateRef<ThreadHeaderContext>;
   @ViewChild('customChannelInfo')
   private chstomChannelInfoTemplate!: TemplateRef<ChannelHeaderInfoContext>;
+  @ViewChild('customAttachmentUpload')
+  private customAttachmentUploadTemplate!: TemplateRef<CustomAttachmentUploadContext>;
 
   constructor(
     private chatService: ChatClientService,
@@ -155,6 +161,9 @@ export class AppComponent implements AfterViewInit {
     this.customTemplatesService.channelHeaderInfoTemplate$.next(
       this.chstomChannelInfoTemplate
     );
+    this.customTemplatesService.customAttachmentUploadTemplate$.next(
+      this.customAttachmentUploadTemplate
+    );
   }
 
   inviteClicked(channel: Channel) {
@@ -164,4 +173,20 @@ export class AppComponent implements AfterViewInit {
       } channel`
     );
   }
+
+  filesSelected(files: FileList | null, attachmentService: AttachmentService) {
+    if (!files) {
+      return;
+    }
+    void attachmentService.filesSelected(files);
+  }
+
+  addRandomImage(attachmentService: AttachmentService) {
+    const customAttachment: Attachment = {
+      type: 'image',
+      image_url: 'https://picsum.photos/200/300',
+      fallback: 'Just a random image',
+    };
+    attachmentService.addAttachment(customAttachment);
+  }
 }

projects/stream-chat-angular/src/lib/attachment.service.spec.ts

@@ -1,12 +1,13 @@
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { first } from 'rxjs/operators';
+import { Attachment } from 'stream-chat';
 import { AttachmentService } from './attachment.service';
 import { ChannelService } from './channel.service';
 import { NotificationService } from './notification.service';
-import { AttachmentUpload } from './types';
+import { AttachmentUpload, DefaultStreamChatGenerics } from './types';
 
 describe('AttachmentService', () => {
-  let service: AttachmentService;
+  let service: AttachmentService<DefaultStreamChatGenerics>;
   let uploadAttachmentsSpy: jasmine.Spy;
   let deleteAttachmentSpy: jasmine.Spy;
   let readAsDataURLSpy: jasmine.Spy;
@@ -30,7 +31,9 @@ describe('AttachmentService', () => {
         },
       ],
     });
-    service = TestBed.inject(AttachmentService);
+    service = TestBed.inject(
+      AttachmentService
+    ) as AttachmentService<DefaultStreamChatGenerics>;
   });
 
   it('should delete attachment, if file is already uploaded', async () => {
@@ -118,6 +121,26 @@ describe('AttachmentService', () => {
     });
   }));
 
+  it(`shouldn't try to delete custom attachments from CDN`, fakeAsync(() => {
+    const customAttachment = {
+      image_url: 'url/to/my/image',
+      type: 'image',
+    };
+    const attachmentUploadsSpy = jasmine.createSpy('attachmentUploadsSpy');
+    service.attachmentUploads$.subscribe(attachmentUploadsSpy);
+    service.addAttachment(customAttachment);
+    let attachmentUpload!: AttachmentUpload;
+    service.attachmentUploads$.pipe(first()).subscribe((uploads) => {
+      attachmentUpload = uploads[0];
+    });
+    attachmentUploadsSpy.calls.reset();
+    void service.deleteAttachment(attachmentUpload);
+    tick();
+
+    expect(attachmentUploadsSpy).toHaveBeenCalledWith([]);
+    expect(deleteAttachmentSpy).not.toHaveBeenCalled();
+  }));
+
   it('should display error message, if upload was unsuccessful', async () => {
     const image = { name: 'my_image.png', type: 'image/png' } as File;
     const file = { name: 'user_guide.pdf', type: 'application/pdf' } as File;
@@ -322,6 +345,14 @@ describe('AttachmentService', () => {
       videoFile,
     ] as any as FileList);
 
+    const customAttachment: Attachment = {
+      type: 'video',
+      asset_url: 'url/to/my/video',
+      thumb_url: 'url/to/my/thumb',
+    };
+
+    service.addAttachment(customAttachment);
+
     expect(service.mapToAttachments()).toEqual([
       { fallback: 'flower.png', image_url: 'http://url/to/img', type: 'image' },
       {
@@ -338,57 +369,81 @@ describe('AttachmentService', () => {
         type: 'file',
         thumb_url: undefined,
       },
+      {
+        type: 'video',
+        asset_url: 'url/to/my/video',
+        thumb_url: 'url/to/my/thumb',
+        isCustomAttachment: true,
+      },
     ]);
   });
 
   it('should create attachmentUploads from attachments', () => {
+    const attachments = [
+      { fallback: 'flower.png', image_url: 'http://url/to/img', type: 'image' },
+      {
+        title: 'note.txt',
+        file_size: 3272969,
+        asset_url: 'http://url/to/data',
+        type: 'file',
+      },
+      {
+        title: 'cute.mov',
+        file_size: 45367543,
+        asset_url: 'http://url/to/video',
+        type: 'video',
+        thumb_url: 'http://url/to/poster',
+      },
+      {
+        type: 'file',
+        asset_url: 'url/to/my/file',
+        title: 'my-file.pdf',
+        isCustomAttachment: true,
+      },
+    ];
     const imageFile = { name: 'flower.png' };
     const dataFile = { name: 'note.txt', size: 3272969 };
     const videoFile = { name: 'cute.mov', size: 45367543 };
+    const customFile = { name: 'my-file.pdf', size: undefined };
     const result = [
       {
         file: imageFile,
         state: 'success',
         url: 'http://url/to/img',
         type: 'image',
+        fromAttachment: attachments[0],
       },
       {
         file: dataFile,
         state: 'success',
         url: 'http://url/to/data',
         type: 'file',
         thumb_url: undefined,
+        fromAttachment: attachments[1],
       },
       {
         file: videoFile,
         state: 'success',
         url: 'http://url/to/video',
         type: 'video',
         thumb_url: 'http://url/to/poster',
+        fromAttachment: attachments[2],
       },
-    ];
-    const attachments = [
-      { fallback: 'flower.png', image_url: 'http://url/to/img', type: 'image' },
       {
-        title: 'note.txt',
-        file_size: 3272969,
-        asset_url: 'http://url/to/data',
+        file: customFile,
         type: 'file',
-      },
-      {
-        title: 'cute.mov',
-        file_size: 45367543,
-        asset_url: 'http://url/to/video',
-        type: 'video',
-        thumb_url: 'http://url/to/poster',
+        url: 'url/to/my/file',
+        state: 'success',
+        thumb_url: undefined,
+        fromAttachment: attachments[3],
       },
     ];
     const spy = jasmine.createSpy();
     service.attachmentUploads$.subscribe(spy);
     spy.calls.reset();
     service.createFromAttachments(attachments);
 
-    expect(spy).toHaveBeenCalledWith(result);
+    expect(spy).toHaveBeenCalledWith(jasmine.arrayContaining(result));
   });
 
   it('should ignore URL attachments if creating from attachments', () => {
@@ -400,4 +455,32 @@ describe('AttachmentService', () => {
 
     expect(spy).not.toHaveBeenCalled();
   });
+
+  it('should be able to add custom attachment', () => {
+    const customAttachment: Attachment = {
+      type: 'file',
+      asset_url: 'url/to/my/file',
+      file_size: undefined,
+      title: 'my-file.pdf',
+    };
+
+    const spy = jasmine.createSpy();
+    service.attachmentUploads$.subscribe(spy);
+    spy.calls.reset();
+    service.addAttachment(customAttachment);
+
+    expect(spy).toHaveBeenCalledWith([
+      {
+        url: 'url/to/my/file',
+        state: 'success',
+        file: {
+          name: 'my-file.pdf',
+          size: undefined,
+        } as unknown as File,
+        type: 'file',
+        fromAttachment: { ...customAttachment, isCustomAttachment: true },
+        thumb_url: undefined,
+      },
+    ]);
+  });
 });

projects/stream-chat-angular/src/lib/attachment.service.ts

@@ -5,15 +5,17 @@ import { Attachment } from 'stream-chat';
 import { ChannelService } from './channel.service';
 import { isImageAttachment } from './is-image-attachment';
 import { NotificationService } from './notification.service';
-import { AttachmentUpload } from './types';
+import { AttachmentUpload, DefaultStreamChatGenerics } from './types';
 
 /**
  * The `AttachmentService` manages the uploads of a message input.
  */
 @Injectable({
   providedIn: 'root',
 })
-export class AttachmentService {
+export class AttachmentService<
+  T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> {
   /**
    * Emits the number of uploads in progress.
    */
@@ -91,6 +93,18 @@ export class AttachmentService {
     await this.uploadAttachments(newUploads);
   }
 
+  /**
+   * You can add custom `image`, `video` and `file` attachments using this method.
+   *
+   * Note: If you just want to use your own CDN for file uploads, you don't necessary need this method, you can just specify you own upload function in the [`ChannelService`](./ChannelService.mdx)
+   *
+   * @param attachment
+   */
+  addAttachment(attachment: Attachment<T>) {
+    attachment.isCustomAttachment = true;
+    this.createFromAttachments([attachment]);
+  }
+
   /**
    * Retries to upload an attachment.
    * @param file
@@ -114,7 +128,10 @@ export class AttachmentService {
   async deleteAttachment(upload: AttachmentUpload) {
     const attachmentUploads = this.attachmentUploadsSubject.getValue();
     let result!: AttachmentUpload[];
-    if (upload.state === 'success') {
+    if (
+      upload.state === 'success' &&
+      !upload.fromAttachment?.isCustomAttachment
+    ) {
       try {
         await this.channelService.deleteAttachment(upload);
         result = [...attachmentUploads];
@@ -146,14 +163,18 @@ export class AttachmentService {
         const attachment: Attachment = {
           type: r.type,
         };
-        if (r.type === 'image') {
-          attachment.fallback = r.file?.name;
-          attachment.image_url = r.url;
+        if (r.fromAttachment) {
+          return r.fromAttachment;
         } else {
-          attachment.asset_url = r.url;
-          attachment.title = r.file?.name;
-          attachment.file_size = r.file?.size;
-          attachment.thumb_url = r.thumb_url;
+          if (r.type === 'image') {
+            attachment.fallback = r.file?.name;
+            attachment.image_url = r.url;
+          } else {
+            attachment.asset_url = r.url;
+            attachment.title = r.file?.name;
+            attachment.file_size = r.file?.size;
+            attachment.thumb_url = r.thumb_url;
+          }
         }
 
         return attachment;
@@ -164,7 +185,7 @@ export class AttachmentService {
    * Maps attachments received from the Stream API to uploads. This is useful when editing a message.
    * @param attachments Attachemnts received with the message
    */
-  createFromAttachments(attachments: Attachment[]) {
+  createFromAttachments(attachments: Attachment<T>[]) {
     const attachmentUploads: AttachmentUpload[] = [];
     attachments.forEach((attachment) => {
       if (isImageAttachment(attachment)) {
@@ -177,6 +198,7 @@ export class AttachmentService {
           file: {
             name: attachment.fallback,
           } as File,
+          fromAttachment: attachment,
         });
       } else if (attachment.type === 'file' || attachment.type === 'video') {
         attachmentUploads.push({
@@ -188,6 +210,7 @@ export class AttachmentService {
           } as File,
           type: attachment.type,
           thumb_url: attachment.thumb_url,
+          fromAttachment: attachment,
         });
       }
     });