feat: support size_limit in upload config (#2301)

# Submit a pull request

### 🎯 Goal

Support the newly introduced upload size limit setting.

### 🎨 UI Changes


![image](https://github.com/GetStream/stream-chat-react/assets/975978/777a93ee-3e90-4e47-b012-4e1cbd35e5ba)

### To-Do

- [x] Bump LLC (GetStream/stream-chat-js#1244)
- [x] Translation

Author: myandrienko

package.json

@@ -75,7 +75,6 @@
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
     "nanoid": "^3.3.4",
-    "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
     "react-dropzone": "^14.2.3",
     "react-fast-compare": "^3.2.2",
@@ -223,7 +222,7 @@
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.5",
-    "stream-chat": "^8.21.0",
+    "stream-chat": "^8.25.1",
     "style-loader": "^2.0.0",
     "ts-jest": "^28.0.8",
     "typescript": "^4.7.4",

rollup.config.js

@@ -49,7 +49,6 @@ const externalDependencies = [
   'lodash.throttle',
   'lodash.uniqby',
   'mml-react',
-  'pretty-bytes',
   'prop-types',
   'react-fast-compare',
   'react-images',

src/components/Attachment/__tests__/Audio.test.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import prettybytes from 'pretty-bytes';
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
@@ -8,6 +7,7 @@ import { Audio } from '../Audio';
 import { ChannelActionProvider, ChatContext } from '../../../context';
 
 import { generateAudioAttachment } from 'mock-builders';
+import { prettifyFileSize } from '../../MessageInput/hooks/utils';
 
 const AUDIO = generateAudioAttachment();
 
@@ -53,7 +53,7 @@ describe('Audio', () => {
     });
 
     expect(getByText(AUDIO.title)).toBeInTheDocument();
-    expect(getByText(prettybytes(AUDIO.file_size))).toBeInTheDocument();
+    expect(getByText(prettifyFileSize(AUDIO.file_size))).toBeInTheDocument();
     expect(container.querySelector('img')).not.toBeInTheDocument();
   });
 

src/components/Attachment/components/FileSizeIndicator.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import prettybytes from 'pretty-bytes';
+import { prettifyFileSize } from '../../MessageInput/hooks/utils';
 
 type FileSizeIndicatorProps = {
   /** file size in byte */
@@ -19,7 +19,7 @@ export const FileSizeIndicator = ({ fileSize, maximumFractionDigits }: FileSizeI
       className='str-chat__message-attachment-file--item-size'
       data-testid='file-size-indicator'
     >
-      {prettybytes(fileSize, { maximumFractionDigits })}
+      {prettifyFileSize(fileSize, maximumFractionDigits)}
     </span>
   );
 };

src/components/MessageInput/__tests__/MessageInput.test.js

@@ -25,14 +25,13 @@ import {
   generateMessage,
   generateUser,
   getOrCreateChannelApi,
+  getTestClient,
   getTestClientWithUser,
   useMockedApis,
 } from '../../../mock-builders';
 
 expect.extend(toHaveNoViolations);
 
-jest.mock('../../Channel/utils', () => ({ makeAddNotifications: jest.fn }));
-
 let chatClient;
 let channel;
 
@@ -76,6 +75,11 @@ const mockFaultyUploadApi = (cause) => jest.fn().mockImplementation(() => Promis
 
 const submitMock = jest.fn();
 const editMock = jest.fn();
+const mockAddNotification = jest.fn();
+
+jest.mock('../../Channel/utils', () => ({
+  makeAddNotifications: () => mockAddNotification,
+}));
 
 const defaultMessageContextValue = {
   getMessageActions: () => ['delete', 'edit', 'quote'],
@@ -509,6 +513,55 @@ function axeNoViolations(container) {
         await axeNoViolations(container);
       });
 
+      it('should show notification if size limit is exceeded', async () => {
+        chatClient = getTestClient({
+          getAppSettings: () => ({
+            app: {
+              file_upload_config: { size_limit: 1 },
+              image_upload_config: { size_limit: 1 },
+            },
+          }),
+        });
+        await renderComponent({
+          messageInputProps: {
+            doFileUploadRequest: mockUploadApi(),
+          },
+        });
+        const formElement = await screen.findByPlaceholderText(inputPlaceholder);
+        const file = getFile(filename1);
+        act(() => dropFile(file, formElement));
+        await waitFor(() => expect(screen.queryByText(filename1)).toBeInTheDocument());
+
+        expect(mockAddNotification).toHaveBeenCalledTimes(1);
+        expect(mockAddNotification.mock.calls[0][0]).toContain('File is too large');
+      });
+
+      it('should apply separate limits to files and images', async () => {
+        chatClient = getTestClient({
+          getAppSettings: () => ({
+            app: {
+              file_upload_config: { size_limit: 100 },
+              image_upload_config: { size_limit: 1 },
+            },
+          }),
+        });
+        const doImageUploadRequest = mockUploadApi();
+        await renderComponent({
+          messageInputProps: {
+            doImageUploadRequest,
+          },
+        });
+        const formElement = await screen.findByPlaceholderText(inputPlaceholder);
+        const file = getImage();
+        await act(() => {
+          dropFile(file, formElement);
+        });
+        await waitFor(() => {
+          expect(mockAddNotification).toHaveBeenCalledTimes(1);
+          expect(mockAddNotification.mock.calls[0][0]).toContain('File is too large');
+        });
+      });
+
       // TODO: Check if pasting plaintext is not prevented -> tricky because recreating exact event is hard
       // TODO: Remove image/file -> difficult because there is no easy selector and components are in react-file-utils
     });

src/components/MessageInput/hooks/utils.ts

@@ -5,6 +5,7 @@ import type { ChannelActionContextValue } from '../../../context/ChannelActionCo
 import type { ChatContextValue } from '../../../context/ChatContext';
 import type { TranslationContextValue } from '../../../context/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { DEFAULT_UPLOAD_SIZE_LIMIT_BYTES } from '../../../constants/limits';
 
 export const accentsMap: { [key: string]: string } = {
   a: 'á|à|ã|â|À|Á|Ã|Â',
@@ -136,12 +137,13 @@ export const checkUploadPermissions = async <
     allowed_mime_types,
     blocked_file_extensions,
     blocked_mime_types,
+    size_limit,
   } =
     ((uploadType === 'image'
       ? appSettings?.app?.image_upload_config
       : appSettings?.app?.file_upload_config) as FileUploadConfig) || {};
 
-  const sendErrorNotification = () =>
+  const sendNotAllowedErrorNotification = () =>
     addNotification(
       t(`Upload type: "{{ type }}" is not allowed`, { type: file.type || 'unknown type' }),
       'error',
@@ -153,7 +155,7 @@ export const checkUploadPermissions = async <
     );
 
     if (!allowed) {
-      sendErrorNotification();
+      sendNotAllowedErrorNotification();
       return false;
     }
   }
@@ -164,7 +166,7 @@ export const checkUploadPermissions = async <
     );
 
     if (blocked) {
-      sendErrorNotification();
+      sendNotAllowedErrorNotification();
       return false;
     }
   }
@@ -175,7 +177,7 @@ export const checkUploadPermissions = async <
     );
 
     if (!allowed) {
-      sendErrorNotification();
+      sendNotAllowedErrorNotification();
       return false;
     }
   }
@@ -186,10 +188,29 @@ export const checkUploadPermissions = async <
     );
 
     if (blocked) {
-      sendErrorNotification();
+      sendNotAllowedErrorNotification();
       return false;
     }
   }
 
+  const sizeLimit = size_limit || DEFAULT_UPLOAD_SIZE_LIMIT_BYTES;
+  if (file.size && file.size > sizeLimit) {
+    addNotification(
+      t('File is too large: {{ size }}, maximum upload size is {{ limit }}', {
+        limit: prettifyFileSize(sizeLimit),
+        size: prettifyFileSize(file.size),
+      }),
+      'error',
+    );
+    return false;
+  }
+
   return true;
 };
+
+export function prettifyFileSize(bytes: number, precision = 3) {
+  const units = ['B', 'kB', 'MB', 'GB'];
+  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const mantissa = bytes / 1024 ** exponent;
+  return `${mantissa.toPrecision(precision)} ${units[exponent]}`;
+}

src/constants/limits.ts

@@ -3,3 +3,4 @@ export const DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
 export const DEFAULT_JUMP_TO_PAGE_SIZE = 100;
 export const DEFAULT_THREAD_PAGE_SIZE = 50;
 export const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
+export const DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024; // 100 MB

src/i18n/de.json

@@ -31,6 +31,7 @@
   "Error: {{ errorMessage }}": "Fehler: {{ errorMessage }}",
   "Failed to jump to the first unread message": "Fehler beim Springen zur ersten ungelesenen Nachricht",
   "Failed to mark channel as read": "Fehler beim Markieren des Kanals als gelesen",
+  "File is too large: {{ size }}, maximum upload size is {{ limit }}": "Datei ist zu groß: {{ size }}, maximale Upload-Größe beträgt {{ limit }}",
   "Flag": "Meldung",
   "Latest Messages": "Neueste Nachrichten",
   "Load more": "Mehr laden",

src/i18n/en.json

@@ -31,6 +31,7 @@
   "Error: {{ errorMessage }}": "Error: {{ errorMessage }}",
   "Failed to jump to the first unread message": "Failed to jump to the first unread message",
   "Failed to mark channel as read": "Failed to mark channel as read",
+  "File is too large: {{ size }}, maximum upload size is {{ limit }}": "File is too large: {{ size }}, maximum upload size is {{ limit }}",
   "Flag": "Flag",
   "Latest Messages": "Latest Messages",
   "Load more": "Load more",

src/i18n/es.json

@@ -31,6 +31,7 @@
   "Error: {{ errorMessage }}": "Error: {{ errorMessage }}",
   "Failed to jump to the first unread message": "Error al saltar al primer mensaje no leído",
   "Failed to mark channel as read": "Error al marcar el canal como leído",
+  "File is too large: {{ size }}, maximum upload size is {{ limit }}": "El archivo es demasiado grande: {{ size }}, el tamaño máximo de carga es de {{ limit }}",
   "Flag": "Bandera",
   "Latest Messages": "Últimos mensajes",
   "Load more": "Cargar más",