Merge pull request #512 from GetStream/better-errors-for-attachment-upload

Better errors for attachment upload

Author: szuperaz

package-lock.json

@@ -117,7 +117,7 @@
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "3.12.0",
+    "@stream-io/stream-chat-css": "4.0.1",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",

package.json

@@ -23,8 +23,11 @@ export const en = {
     'Error pinning message': 'Error pinning message',
     'Error removing message pin': 'Error removing message pin',
     'Error unmuting a user ...': 'Error unmuting a user ...',
-    'Error uploading file': 'Error uploading file',
-    'Error uploading image': 'Error uploading image',
+    'Error uploading file': 'Error uploading file "{{ name }}"',
+    'Error uploading file, maximum file size exceeded':
+      'Error uploading "{{ name }}", maximum file size {{ limit }} exceeded',
+    'Error uploading file, extension not supported':
+      'Error uploading "{{ name }}", extension {{ ext }} not supported',
     'Error deleting attachment': 'Error deleting attachment',
     'Error · Unsent': "Message couldn't be sent",
     'Error: {{ errorMessage }}': 'Error: {{ errorMessage }}',

projects/stream-chat-angular/src/assets/i18n/en.ts

@@ -145,19 +145,37 @@ describe('AttachmentService', () => {
     const image = { name: 'my_image.png', type: 'image/png' } as File;
     const file = { name: 'user_guide.pdf', type: 'application/pdf' } as File;
     uploadAttachmentsSpy.and.resolveTo([
-      { file: image, state: 'error', type: 'image' },
-      { file, state: 'error', type: 'file' },
+      {
+        file: image,
+        state: 'error',
+        type: 'image',
+        errorReason: 'file-extension',
+        errorExtraInfo: [{ param: '.jpg' }],
+      },
+      {
+        file,
+        state: 'error',
+        type: 'file',
+        errorReason: 'file-size',
+        errorExtraInfo: [{ param: '50MB' }],
+      },
     ]);
     const notificationService = TestBed.inject(NotificationService);
     spyOn(notificationService, 'addTemporaryNotification');
     await service.filesSelected([image, file] as any as FileList);
 
     expect(notificationService.addTemporaryNotification).toHaveBeenCalledWith(
-      'streamChat.Error uploading image'
+      'streamChat.Error uploading file, extension not supported',
+      'error',
+      undefined,
+      { name: image.name, ext: '.jpg' }
     );
 
     expect(notificationService.addTemporaryNotification).toHaveBeenCalledWith(
-      'streamChat.Error uploading file'
+      'streamChat.Error uploading file, maximum file size exceeded',
+      'error',
+      undefined,
+      { name: file.name, limit: '50MB' }
     );
   });
 
@@ -181,6 +199,8 @@ describe('AttachmentService', () => {
         url: 'image/url',
         type: 'image',
         thumb_url: undefined,
+        errorReason: undefined,
+        errorExtraInfo: undefined,
       },
     ]);
   });

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

@@ -258,10 +258,30 @@ export class AttachmentService<
       upload.url = r.url;
       upload.thumb_url = r.thumb_url;
       if (upload.state === 'error') {
+        upload.errorReason = r.errorReason;
+        upload.errorExtraInfo = r.errorExtraInfo;
+        let errorKey;
+        const translateParams: { name: string; ext?: string; limit?: string } =
+          { name: upload.file.name };
+        switch (upload.errorReason) {
+          case 'file-extension':
+            errorKey =
+              'streamChat.Error uploading file, extension not supported';
+            translateParams.ext = upload.errorExtraInfo?.[0]?.param;
+            break;
+          case 'file-size':
+            errorKey =
+              'streamChat.Error uploading file, maximum file size exceeded';
+            translateParams.limit = upload.errorExtraInfo?.[0]?.param;
+            break;
+          default:
+            errorKey = 'streamChat.Error uploading file';
+        }
         this.notificationService.addTemporaryNotification(
-          upload.type === 'image'
-            ? 'streamChat.Error uploading image'
-            : 'streamChat.Error uploading file'
+          errorKey,
+          'error',
+          undefined,
+          translateParams
         );
       }
     });

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

@@ -1551,7 +1551,15 @@ describe('ChannelService', () => {
     spyOn(channel, 'sendImage').and.callFake((file: File) => {
       switch (file.name) {
         case 'file_error.jpg':
-          return Promise.reject(new Error());
+          return Promise.reject({
+            response: {
+              data: {
+                code: 4,
+                message:
+                  'UploadImage failed with error: "File extension .jpg is not supported"',
+              },
+            },
+          });
         default:
           return Promise.resolve({
             file: 'http://url/to/image',
@@ -1563,7 +1571,15 @@ describe('ChannelService', () => {
       (file: File, _: string, type: string) => {
         switch (file.name) {
           case 'file_error.pdf':
-            return Promise.reject(new Error());
+            return Promise.reject({
+              response: {
+                data: {
+                  code: 22,
+                  message:
+                    'UploadFile failed with error: "max upload size of 50MB exceeded"',
+                },
+              },
+            });
           default:
             return Promise.resolve({
               file: 'http://url/to/file',
@@ -1597,15 +1613,27 @@ describe('ChannelService', () => {
         type: 'image',
         thumb_url: undefined,
       },
-      { file: file2, state: 'error', type: 'image' },
+      {
+        file: file2,
+        state: 'error',
+        type: 'image',
+        errorReason: 'file-extension',
+        errorExtraInfo: [{ param: '.jpg' }],
+      },
       {
         file: file3,
         state: 'success',
         url: 'http://url/to/file',
         type: 'file',
         thumb_url: undefined,
       },
-      { file: file4, state: 'error', type: 'file' },
+      {
+        file: file4,
+        state: 'error',
+        type: 'file',
+        errorReason: 'file-size',
+        errorExtraInfo: [{ param: '50MB' }],
+      },
       {
         file: file5,
         state: 'success',
@@ -1907,15 +1935,27 @@ describe('ChannelService', () => {
         type: 'image',
         thumb_url: undefined,
       },
-      { file: file2, state: 'error', type: 'image' },
+      {
+        file: file2,
+        state: 'error',
+        type: 'image',
+        errorReason: 'unknown',
+        errorExtraInfo: undefined,
+      },
       {
         file: file3,
         state: 'success',
         url: 'http://url/to/pdf',
         type: 'file',
         thumb_url: undefined,
       },
-      { file: file4, state: 'error', type: 'file' },
+      {
+        file: file4,
+        state: 'error',
+        type: 'file',
+        errorReason: 'unknown',
+        errorExtraInfo: undefined,
+      },
     ];
 
     expect(channel.sendImage).not.toHaveBeenCalled();

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

@@ -30,6 +30,7 @@ import { NotificationService } from './notification.service';
 import { getReadBy } from './read-by';
 import {
   AttachmentUpload,
+  AttachmentUploadErrorReason,
   ChannelQueryState,
   DefaultStreamChatGenerics,
   MessageInput,
@@ -867,7 +868,33 @@ export class ChannelService<
           thumb_url: (uploadResult.value as any).thumb_url,
         });
       } else {
-        result.push({ file, type, state: 'error' });
+        let reason: AttachmentUploadErrorReason = 'unknown';
+        let extraData: { param: string } | undefined;
+        /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */
+        const message: string | undefined =
+          /* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */
+          uploadResult.reason.response?.data?.message;
+        /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */
+        const code: number | undefined =
+          /* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */
+          uploadResult.reason.response?.data?.code;
+        if (code === 22) {
+          reason = 'file-size';
+          extraData = { param: /\d+MB/.exec(message || '')?.[0] || '100MB' };
+        } else if (
+          code === 4 &&
+          message?.toLowerCase()?.includes('file extension')
+        ) {
+          reason = 'file-extension';
+          extraData = { param: /\.\w+/.exec(message)?.[0] || '' };
+        }
+        result.push({
+          file,
+          type,
+          state: 'error',
+          errorReason: reason,
+          errorExtraInfo: extraData ? [extraData] : undefined,
+        });
       }
     });
 

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

@@ -79,11 +79,18 @@ export type StreamMessage<
   T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 > = FormatMessageResponse<T>;
 
+export type AttachmentUploadErrorReason =
+  | 'file-size'
+  | 'file-extension'
+  | 'unknown';
+
 export type AttachmentUpload<
   T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 > = {
   file: File;
   state: 'error' | 'success' | 'uploading';
+  errorReason?: AttachmentUploadErrorReason;
+  errorExtraInfo?: { param: string }[];
   url?: string;
   type: 'image' | 'file' | 'video';
   previewUri?: string | ArrayBuffer;