refactor(console,core,schemas): unify image upload size limit on both frontend and backend

packages/console/src/ds-components/Uploader/FileUploader/index.tsx

@@ -1,5 +1,5 @@
 import type { AllowedUploadMimeType, UserAssets } from '@logto/schemas';
-import { maxUploadFileSize } from '@logto/schemas';
+import { maxUploadImageSize } from '@logto/schemas';
 import classNames from 'classnames';
 import { type KyInstance } from 'ky';
 import { useCallback, useEffect, useState } from 'react';
@@ -15,7 +15,6 @@ import { Ring } from '../../Spinner';
 import * as styles from './index.module.scss';
 
 export type Props = {
-  readonly maxSize: number; // In bytes
   readonly allowedMimeTypes: AllowedUploadMimeType[];
   readonly actionDescription?: string;
   readonly onCompleted: (fileUrl: string) => void;
@@ -33,7 +32,6 @@ export type Props = {
 };
 
 function FileUploader({
-  maxSize,
   allowedMimeTypes,
   actionDescription,
   onCompleted,
@@ -90,10 +88,10 @@ function FileUploader({
         return;
       }
 
-      const fileSizeLimit = Math.min(maxSize, maxUploadFileSize);
-
-      if (acceptedFile.size > fileSizeLimit) {
-        setUploadError(t('components.uploader.error_file_size', { size: fileSizeLimit / 1024 }));
+      if (acceptedFile.size > maxUploadImageSize) {
+        setUploadError(
+          t('components.uploader.error_file_size', { size: maxUploadImageSize / 1024 })
+        );
 
         return;
       }
@@ -113,7 +111,7 @@ function FileUploader({
         setIsUploading(false);
       }
     },
-    [api, apiInstance, allowedMimeTypes, maxSize, onCompleted, t, uploadUrl]
+    [api, apiInstance, allowedMimeTypes, onCompleted, t, uploadUrl]
   );
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({

packages/console/src/ds-components/Uploader/ImageUploader/index.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import Delete from '@/assets/icons/delete.svg';
 import ImageWithErrorFallback from '@/ds-components/ImageWithErrorFallback';
-import useImageMimeTypes, { maxImageSizeLimit } from '@/hooks/use-image-mime-types';
+import useImageMimeTypes from '@/hooks/use-image-mime-types';
 
 import IconButton from '../../IconButton';
 import FileUploader from '../FileUploader';
@@ -53,12 +53,7 @@ function ImageUploader({
       </IconButton>
     </div>
   ) : (
-    <FileUploader
-      allowedMimeTypes={allowedMimeTypes}
-      maxSize={maxImageSizeLimit}
-      className={className}
-      {...rest}
-    />
+    <FileUploader allowedMimeTypes={allowedMimeTypes} className={className} {...rest} />
   );
 }
 

packages/console/src/hooks/use-image-mime-types.ts

@@ -1,11 +1,9 @@
-import type { AllowedUploadMimeType } from '@logto/schemas';
+import { maxUploadImageSize, type AllowedUploadMimeType } from '@logto/schemas';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { convertToFileExtensionArray } from '@/utils/uploader';
 
-export const maxImageSizeLimit = 500 * 1024; // 500 KB
-
 const allowedImageMimeTypes: AllowedUploadMimeType[] = [
   'image/svg+xml',
   'image/png',
@@ -25,7 +23,7 @@ const useImageMimeTypes = (
 
   const description = useMemo(() => {
     return t('components.uploader.image_limit', {
-      size: maxImageSizeLimit / 1024,
+      size: maxUploadImageSize / 1024,
       extensions: convertToFileExtensionArray(allowedMimeTypes),
     });
   }, [allowedMimeTypes, t]);

packages/core/src/routes-me/user-assets.ts

@@ -4,7 +4,7 @@ import { consoleLog } from '@logto/cli/lib/utils.js';
 import {
   userAssetsServiceStatusGuard,
   allowUploadMimeTypes,
-  maxUploadFileSize,
+  maxUploadImageSize,
   type UserAssets,
   userAssetsGuard,
   adminTenantId,
@@ -41,7 +41,7 @@ export default function userAssetsRoutes<T extends AuthedMeRouter>(...[router]:
         ? {
             status: 'ready',
             allowUploadMimeTypes,
-            maxUploadFileSize,
+            maxUploadFileSize: maxUploadImageSize,
           }
         : {
             status: 'not_configured',
@@ -66,7 +66,7 @@ export default function userAssetsRoutes<T extends AuthedMeRouter>(...[router]:
 
       const file = bodyFiles[0];
       assertThat(file, 'guard.invalid_input');
-      assertThat(file.size <= maxUploadFileSize, 'guard.file_size_exceeded');
+      assertThat(file.size <= maxUploadImageSize, 'guard.file_size_exceeded');
       assertThat(
         allowUploadMimeTypes.map(String).includes(file.mimetype),
         'guard.mime_type_not_allowed'

packages/core/src/routes/user-assets.ts

@@ -5,7 +5,7 @@ import {
   userAssetsGuard,
   userAssetsServiceStatusGuard,
   allowUploadMimeTypes,
-  maxUploadFileSize,
+  maxUploadImageSize,
 } from '@logto/schemas';
 import { generateStandardId } from '@logto/shared';
 import { format } from 'date-fns';
@@ -36,7 +36,7 @@ export default function userAssetsRoutes<T extends ManagementApiRouter>(
         ? {
             status: 'ready',
             allowUploadMimeTypes,
-            maxUploadFileSize,
+            maxUploadFileSize: maxUploadImageSize,
           }
         : {
             status: 'not_configured',
@@ -61,7 +61,7 @@ export default function userAssetsRoutes<T extends ManagementApiRouter>(
 
       const file = bodyFiles[0];
       assertThat(file, 'guard.invalid_input');
-      assertThat(file.size <= maxUploadFileSize, 'guard.file_size_exceeded');
+      assertThat(file.size <= maxUploadImageSize, 'guard.file_size_exceeded');
       assertThat(
         allowUploadMimeTypes.map(String).includes(file.mimetype),
         'guard.mime_type_not_allowed'

packages/schemas/src/types/user-assets.ts

@@ -1,6 +1,7 @@
 import { z } from 'zod';
 
-export const maxUploadFileSize = 8 * 1024 * 1024; // 8MB
+export const maxUploadFileSize = 10 * 1024 * 1024; // 10MB
+export const maxUploadImageSize = 500 * 1024; // 500KB
 
 // Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
 export const allowUploadMimeTypes = [