feat: Add custom attachment requests #255

Author: szuperaz

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

@@ -1358,4 +1358,106 @@ describe('ChannelService', () => {
 
     expect(spy).toHaveBeenCalledWith({ channel1: newMessage.created_at });
   });
+
+  it('should call custom #customFileUploadRequest and #customImageUploadRequest if provided', async () => {
+    await init();
+    let channel!: Channel<DefaultStreamChatGenerics>;
+    service.activeChannel$.pipe(first()).subscribe((c) => (channel = c!));
+    const customImageUploadRequest = jasmine
+      .createSpy()
+      .and.callFake((file: File) => {
+        switch (file.name) {
+          case 'file_error.jpg':
+            return Promise.reject(new Error());
+          default:
+            return Promise.resolve({ file: 'url/to/image' });
+        }
+      });
+    const customFileUploadRequest = jasmine
+      .createSpy()
+      .and.callFake((file: File) => {
+        switch (file.name) {
+          case 'file_error.pdf':
+            return Promise.reject(new Error());
+          default:
+            return Promise.resolve({ file: 'url/to/pdf' });
+        }
+      });
+    service.customImageUploadRequest = customImageUploadRequest;
+    service.customFileUploadRequest = customFileUploadRequest;
+    spyOn(channel, 'sendImage');
+    spyOn(channel, 'sendFile');
+    const file1 = { name: 'food.png' } as File;
+    const file2 = { name: 'file_error.jpg' } as File;
+    const file3 = { name: 'menu.pdf' } as File;
+    const file4 = { name: 'file_error.pdf' } as File;
+    const attachments = [
+      { file: file1, type: 'image', state: 'uploading' },
+      { file: file2, type: 'image', state: 'uploading' },
+      { file: file3, type: 'file', state: 'uploading' },
+      { file: file4, type: 'file', state: 'uploading' },
+    ] as AttachmentUpload[];
+    const result = await service.uploadAttachments(attachments);
+    const expectedResult = [
+      {
+        file: file1,
+        state: 'success',
+        url: 'url/to/image',
+        type: 'image',
+      },
+      { file: file2, state: 'error', type: 'image' },
+      {
+        file: file3,
+        state: 'success',
+        url: 'url/to/pdf',
+        type: 'file',
+      },
+      { file: file4, state: 'error', type: 'file' },
+    ];
+
+    expect(channel.sendImage).not.toHaveBeenCalled();
+    expect(channel.sendFile).not.toHaveBeenCalled();
+
+    expectedResult.forEach((r, i) => {
+      expect(r).toEqual(result[i]);
+    });
+  });
+
+  it('should call custom #customImageDeleteRequest if provided', async () => {
+    await init();
+    let channel!: Channel<DefaultStreamChatGenerics>;
+    service.activeChannel$.pipe(first()).subscribe((c) => (channel = c!));
+    const customImageDeleteRequest = jasmine.createSpy();
+    service.customImageDeleteRequest = customImageDeleteRequest;
+    spyOn(channel, 'deleteImage');
+    const url = 'url/to/image';
+    await service.deleteAttachment({
+      url,
+      type: 'image',
+      state: 'success',
+      file: {} as any as File,
+    });
+
+    expect(customImageDeleteRequest).toHaveBeenCalledWith(url, channel);
+    expect(channel.deleteImage).not.toHaveBeenCalled();
+  });
+
+  it('should call custom #customFileDeleteRequest if provided', async () => {
+    await init();
+    let channel!: Channel<DefaultStreamChatGenerics>;
+    service.activeChannel$.pipe(first()).subscribe((c) => (channel = c!));
+    const customFileDeleteRequest = jasmine.createSpy();
+    service.customFileDeleteRequest = customFileDeleteRequest;
+    spyOn(channel, 'deleteFile');
+    const url = 'url/to/file';
+    await service.deleteAttachment({
+      url,
+      type: 'file',
+      state: 'success',
+      file: {} as any as File,
+    });
+
+    expect(customFileDeleteRequest).toHaveBeenCalledWith(url, channel);
+    expect(channel.deleteFile).not.toHaveBeenCalled();
+  });
 });

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

@@ -21,9 +21,9 @@ import {
 } from 'stream-chat';
 import { ChatClientService, Notification } from './chat-client.service';
 import { createMessagePreview } from './message-preview';
-import { MessageReactionType } from './message-reactions/message-reactions.component';
 import { getReadBy } from './read-by';
 import { AttachmentUpload, StreamMessage } from './types';
+import { MessageReactionType } from './message-reactions/message-reactions.component';
 
 /**
  * The `ChannelService` provides data and interaction for the channel list and message list. TEST
@@ -189,6 +189,28 @@ export class ChannelService {
     threadListSetter: (messages: StreamMessage[]) => void,
     parentMessageSetter: (message: StreamMessage | undefined) => void
   ) => void;
+  /**
+   * You can override the default file upload request - you can use this to upload files to your own CDN
+   */
+  customFileUploadRequest?: (
+    file: File,
+    channel: Channel
+  ) => Promise<{ file: string }>;
+  /**
+   * You can override the default image upload request - you can use this to upload images to your own CDN
+   */
+  customImageUploadRequest?: (
+    file: File,
+    channel: Channel
+  ) => Promise<{ file: string }>;
+  /**
+   * You can override the default file delete request - override this if you use your own CDN
+   */
+  customFileDeleteRequest?: (url: string, channel: Channel) => Promise<void>;
+  /**
+   * You can override the default image delete request - override this if you use your own CDN
+   */
+  customImageDeleteRequest?: (url: string, channel: Channel) => Promise<void>;
   private channelsSubject = new BehaviorSubject<Channel[] | undefined>(
     undefined
   );
@@ -549,7 +571,11 @@ export class ChannelService {
     const uploadResults = await Promise.allSettled(
       uploads.map((upload) =>
         upload.type === 'image'
-          ? channel.sendImage(upload.file)
+          ? this.customImageUploadRequest
+            ? this.customImageUploadRequest(upload.file, channel)
+            : channel.sendImage(upload.file)
+          : this.customFileUploadRequest
+          ? this.customFileUploadRequest(upload.file, channel)
           : channel.sendFile(upload.file)
       )
     );
@@ -578,7 +604,11 @@ export class ChannelService {
   async deleteAttachment(attachmentUpload: AttachmentUpload) {
     const channel = this.activeChannelSubject.getValue()!;
     await (attachmentUpload.type === 'image'
-      ? channel.deleteImage(attachmentUpload.url!)
+      ? this.customImageDeleteRequest
+        ? this.customImageDeleteRequest(attachmentUpload.url!, channel)
+        : channel.deleteImage(attachmentUpload.url!)
+      : this.customFileDeleteRequest
+      ? this.customFileDeleteRequest(attachmentUpload.url!, channel)
       : channel.deleteFile(attachmentUpload.url!));
   }