|
@@ -14,19 +14,113 @@ import {
|
|
|
getSupportFileType,
|
|
|
isAllowedFileExtension,
|
|
|
} from './utils'
|
|
|
-import { FILE_SIZE_LIMIT } from './constants'
|
|
|
+import {
|
|
|
+ AUDIO_SIZE_LIMIT,
|
|
|
+ FILE_SIZE_LIMIT,
|
|
|
+ IMG_SIZE_LIMIT,
|
|
|
+ VIDEO_SIZE_LIMIT,
|
|
|
+} from '@/app/components/base/file-uploader/constants'
|
|
|
import { useToastContext } from '@/app/components/base/toast'
|
|
|
import { TransferMethod } from '@/types/app'
|
|
|
import { SupportUploadFileTypes } from '@/app/components/workflow/types'
|
|
|
import type { FileUpload } from '@/app/components/base/features/types'
|
|
|
import { formatFileSize } from '@/utils/format'
|
|
|
import { fetchRemoteFileInfo } from '@/service/common'
|
|
|
+import type { FileUploadConfigResponse } from '@/models/common'
|
|
|
+
|
|
|
+export const useFileSizeLimit = (fileUploadConfig?: FileUploadConfigResponse) => {
|
|
|
+ const imgSizeLimit = Number(fileUploadConfig?.image_file_size_limit) * 1024 * 1024 || IMG_SIZE_LIMIT
|
|
|
+ const docSizeLimit = Number(fileUploadConfig?.file_size_limit) * 1024 * 1024 || FILE_SIZE_LIMIT
|
|
|
+ const audioSizeLimit = Number(fileUploadConfig?.audio_file_size_limit) * 1024 * 1024 || AUDIO_SIZE_LIMIT
|
|
|
+ const videoSizeLimit = Number(fileUploadConfig?.video_file_size_limit) * 1024 * 1024 || VIDEO_SIZE_LIMIT
|
|
|
+
|
|
|
+ return {
|
|
|
+ imgSizeLimit,
|
|
|
+ docSizeLimit,
|
|
|
+ audioSizeLimit,
|
|
|
+ videoSizeLimit,
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
export const useFile = (fileConfig: FileUpload) => {
|
|
|
const { t } = useTranslation()
|
|
|
const { notify } = useToastContext()
|
|
|
const fileStore = useFileStore()
|
|
|
const params = useParams()
|
|
|
+ const { imgSizeLimit, docSizeLimit, audioSizeLimit, videoSizeLimit } = useFileSizeLimit(fileConfig.fileUploadConfig)
|
|
|
+
|
|
|
+ const checkSizeLimit = (fileType: string, fileSize: number) => {
|
|
|
+ switch (fileType) {
|
|
|
+ case SupportUploadFileTypes.image: {
|
|
|
+ if (fileSize > imgSizeLimit) {
|
|
|
+ notify({
|
|
|
+ type: 'error',
|
|
|
+ message: t('common.fileUploader.uploadFromComputerLimit', {
|
|
|
+ type: SupportUploadFileTypes.image,
|
|
|
+ size: formatFileSize(imgSizeLimit),
|
|
|
+ }),
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ case SupportUploadFileTypes.document: {
|
|
|
+ if (fileSize > docSizeLimit) {
|
|
|
+ notify({
|
|
|
+ type: 'error',
|
|
|
+ message: t('common.fileUploader.uploadFromComputerLimit', {
|
|
|
+ type: SupportUploadFileTypes.document,
|
|
|
+ size: formatFileSize(docSizeLimit),
|
|
|
+ }),
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ case SupportUploadFileTypes.audio: {
|
|
|
+ if (fileSize > audioSizeLimit) {
|
|
|
+ notify({
|
|
|
+ type: 'error',
|
|
|
+ message: t('common.fileUploader.uploadFromComputerLimit', {
|
|
|
+ type: SupportUploadFileTypes.audio,
|
|
|
+ size: formatFileSize(audioSizeLimit),
|
|
|
+ }),
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ case SupportUploadFileTypes.video: {
|
|
|
+ if (fileSize > videoSizeLimit) {
|
|
|
+ notify({
|
|
|
+ type: 'error',
|
|
|
+ message: t('common.fileUploader.uploadFromComputerLimit', {
|
|
|
+ type: SupportUploadFileTypes.video,
|
|
|
+ size: formatFileSize(videoSizeLimit),
|
|
|
+ }),
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ case SupportUploadFileTypes.custom: {
|
|
|
+ if (fileSize > docSizeLimit) {
|
|
|
+ notify({
|
|
|
+ type: 'error',
|
|
|
+ message: t('common.fileUploader.uploadFromComputerLimit', {
|
|
|
+ type: SupportUploadFileTypes.document,
|
|
|
+ size: formatFileSize(docSizeLimit),
|
|
|
+ }),
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ default: {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
const handleAddFile = useCallback((newFile: FileEntity) => {
|
|
|
const {
|
|
@@ -117,12 +211,15 @@ export const useFile = (fileConfig: FileUpload) => {
|
|
|
progress: 100,
|
|
|
supportFileType: getSupportFileType(url, res.file_type, allowedFileTypes?.includes(SupportUploadFileTypes.custom)),
|
|
|
}
|
|
|
- handleUpdateFile(newFile)
|
|
|
+ if (!checkSizeLimit(newFile.supportFileType, newFile.size))
|
|
|
+ handleRemoveFile(uploadingFile.id)
|
|
|
+ else
|
|
|
+ handleUpdateFile(newFile)
|
|
|
}).catch(() => {
|
|
|
notify({ type: 'error', message: t('common.fileUploader.pasteFileLinkInvalid') })
|
|
|
handleRemoveFile(uploadingFile.id)
|
|
|
})
|
|
|
- }, [handleAddFile, handleUpdateFile, notify, t, handleRemoveFile, fileConfig?.allowed_file_types])
|
|
|
+ }, [checkSizeLimit, handleAddFile, handleUpdateFile, notify, t, handleRemoveFile, fileConfig?.allowed_file_types])
|
|
|
|
|
|
const handleLoadFileFromLinkSuccess = useCallback(() => { }, [])
|
|
|
|
|
@@ -140,13 +237,13 @@ export const useFile = (fileConfig: FileUpload) => {
|
|
|
notify({ type: 'error', message: t('common.fileUploader.fileExtensionNotSupport') })
|
|
|
return
|
|
|
}
|
|
|
- if (file.size > FILE_SIZE_LIMIT) {
|
|
|
- notify({ type: 'error', message: t('common.fileUploader.uploadFromComputerLimit', { size: formatFileSize(FILE_SIZE_LIMIT) }) })
|
|
|
+ const allowedFileTypes = fileConfig.allowed_file_types
|
|
|
+ const fileType = getSupportFileType(file.name, file.type, allowedFileTypes?.includes(SupportUploadFileTypes.custom))
|
|
|
+ if (!checkSizeLimit(fileType, file.size))
|
|
|
return
|
|
|
- }
|
|
|
+
|
|
|
const reader = new FileReader()
|
|
|
const isImage = file.type.startsWith('image')
|
|
|
- const allowedFileTypes = fileConfig.allowed_file_types
|
|
|
|
|
|
reader.addEventListener(
|
|
|
'load',
|
|
@@ -187,7 +284,7 @@ export const useFile = (fileConfig: FileUpload) => {
|
|
|
false,
|
|
|
)
|
|
|
reader.readAsDataURL(file)
|
|
|
- }, [notify, t, handleAddFile, handleUpdateFile, params.token, fileConfig?.allowed_file_types, fileConfig?.allowed_file_extensions])
|
|
|
+ }, [checkSizeLimit, notify, t, handleAddFile, handleUpdateFile, params.token, fileConfig?.allowed_file_types, fileConfig?.allowed_file_extensions])
|
|
|
|
|
|
const handleClipboardPasteFile = useCallback((e: ClipboardEvent<HTMLTextAreaElement>) => {
|
|
|
const file = e.clipboardData?.files[0]
|