From b5abe073a7951eded3ee894737e2ae291377660e Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Mon, 15 Jul 2024 13:37:44 +0800 Subject: [PATCH] refactor(console,core,schemas): unify image upload size limit on both frontend and backend --- .../ds-components/Uploader/FileUploader/index.tsx | 14 ++++++-------- .../ds-components/Uploader/ImageUploader/index.tsx | 9 ++------- packages/console/src/hooks/use-image-mime-types.ts | 6 ++---- packages/core/src/routes-me/user-assets.ts | 6 +++--- packages/core/src/routes/user-assets.ts | 6 +++--- packages/schemas/src/types/user-assets.ts | 3 ++- 6 files changed, 18 insertions(+), 26 deletions(-) diff --git a/packages/console/src/ds-components/Uploader/FileUploader/index.tsx b/packages/console/src/ds-components/Uploader/FileUploader/index.tsx index edafb2d32..16f55e19a 100644 --- a/packages/console/src/ds-components/Uploader/FileUploader/index.tsx +++ b/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({ diff --git a/packages/console/src/ds-components/Uploader/ImageUploader/index.tsx b/packages/console/src/ds-components/Uploader/ImageUploader/index.tsx index 49bc45a7f..3e9ee8113 100644 --- a/packages/console/src/ds-components/Uploader/ImageUploader/index.tsx +++ b/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({ ) : ( - + ); } diff --git a/packages/console/src/hooks/use-image-mime-types.ts b/packages/console/src/hooks/use-image-mime-types.ts index 7300516a4..91136f7fc 100644 --- a/packages/console/src/hooks/use-image-mime-types.ts +++ b/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]); diff --git a/packages/core/src/routes-me/user-assets.ts b/packages/core/src/routes-me/user-assets.ts index f80333774..2fac031ba 100644 --- a/packages/core/src/routes-me/user-assets.ts +++ b/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(...[router]: ? { status: 'ready', allowUploadMimeTypes, - maxUploadFileSize, + maxUploadFileSize: maxUploadImageSize, } : { status: 'not_configured', @@ -66,7 +66,7 @@ export default function userAssetsRoutes(...[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' diff --git a/packages/core/src/routes/user-assets.ts b/packages/core/src/routes/user-assets.ts index cf1f7e637..c82f97fad 100644 --- a/packages/core/src/routes/user-assets.ts +++ b/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( ? { status: 'ready', allowUploadMimeTypes, - maxUploadFileSize, + maxUploadFileSize: maxUploadImageSize, } : { status: 'not_configured', @@ -61,7 +61,7 @@ export default function userAssetsRoutes( 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' diff --git a/packages/schemas/src/types/user-assets.ts b/packages/schemas/src/types/user-assets.ts index d6e2d4312..233c62a5d 100644 --- a/packages/schemas/src/types/user-assets.ts +++ b/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 = [