fix: file uploader

This commit is contained in:
StyleZhang 2024-09-19 17:08:02 +08:00
parent 2b0c39ed3f
commit 8236f8fed8
2 changed files with 24 additions and 15 deletions

View File

@ -26,7 +26,19 @@ export const useFile = (fileConfig: FileUpload) => {
const fileStore = useFileStore() const fileStore = useFileStore()
const params = useParams() const params = useParams()
const handleAddOrUpdateFiles = useCallback((newFile: FileEntity) => { const handleAddFile = useCallback((newFile: FileEntity) => {
const {
files,
setFiles,
} = fileStore.getState()
const newFiles = produce(files, (draft) => {
draft.push(newFile)
})
setFiles(newFiles)
}, [fileStore])
const handleUpdateFile = useCallback((newFile: FileEntity) => {
const { const {
files, files,
setFiles, setFiles,
@ -37,8 +49,6 @@ export const useFile = (fileConfig: FileUpload) => {
if (index > -1) if (index > -1)
draft[index] = newFile draft[index] = newFile
else
draft.push(newFile)
}) })
setFiles(newFiles) setFiles(newFiles)
}, [fileStore]) }, [fileStore])
@ -69,18 +79,18 @@ export const useFile = (fileConfig: FileUpload) => {
fileUpload({ fileUpload({
file: uploadingFile.file!, file: uploadingFile.file!,
onProgressCallback: (progress) => { onProgressCallback: (progress) => {
handleAddOrUpdateFiles({ ...uploadingFile, progress }) handleUpdateFile({ ...uploadingFile, progress })
}, },
onSuccessCallback: (res) => { onSuccessCallback: (res) => {
handleAddOrUpdateFiles({ ...uploadingFile, fileId: res.id, progress: 100 }) handleUpdateFile({ ...uploadingFile, fileId: res.id, progress: 100 })
}, },
onErrorCallback: () => { onErrorCallback: () => {
notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerUploadError') }) notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerUploadError') })
handleAddOrUpdateFiles({ ...uploadingFile, progress: -1 }) handleUpdateFile({ ...uploadingFile, progress: -1 })
}, },
}, !!params.token) }, !!params.token)
} }
}, [fileStore, notify, t, handleAddOrUpdateFiles, params]) }, [fileStore, notify, t, handleUpdateFile, params])
const handleLoadFileFromLink = useCallback(() => {}, []) const handleLoadFileFromLink = useCallback(() => {}, [])
@ -117,18 +127,18 @@ export const useFile = (fileConfig: FileUpload) => {
fileType: isCustomFileType ? SupportUploadFileTypes.custom : getFileType(file), fileType: isCustomFileType ? SupportUploadFileTypes.custom : getFileType(file),
type: TransferMethod.local_file, type: TransferMethod.local_file,
} }
handleAddOrUpdateFiles(uploadingFile) handleAddFile(uploadingFile)
fileUpload({ fileUpload({
file: uploadingFile.file, file: uploadingFile.file,
onProgressCallback: (progress) => { onProgressCallback: (progress) => {
handleAddOrUpdateFiles({ ...uploadingFile, progress }) handleUpdateFile({ ...uploadingFile, progress })
}, },
onSuccessCallback: (res) => { onSuccessCallback: (res) => {
handleAddOrUpdateFiles({ ...uploadingFile, fileStorageId: res.id, progress: 100 }) handleUpdateFile({ ...uploadingFile, fileStorageId: res.id, progress: 100 })
}, },
onErrorCallback: () => { onErrorCallback: () => {
notify({ type: 'error', message: t('common.fileUploader.uploadFromComputerUploadError') }) notify({ type: 'error', message: t('common.fileUploader.uploadFromComputerUploadError') })
handleAddOrUpdateFiles({ ...uploadingFile, progress: -1 }) handleUpdateFile({ ...uploadingFile, progress: -1 })
}, },
}, !!params.token) }, !!params.token)
}, },
@ -142,7 +152,7 @@ export const useFile = (fileConfig: FileUpload) => {
false, false,
) )
reader.readAsDataURL(file) reader.readAsDataURL(file)
}, [notify, t, handleAddOrUpdateFiles, params.token, fileConfig?.allowed_file_types]) }, [notify, t, handleAddFile, handleUpdateFile, params.token, fileConfig?.allowed_file_types])
const handleClipboardPasteFile = useCallback((e: ClipboardEvent<HTMLTextAreaElement>) => { const handleClipboardPasteFile = useCallback((e: ClipboardEvent<HTMLTextAreaElement>) => {
const file = e.clipboardData?.files[0] const file = e.clipboardData?.files[0]
@ -182,7 +192,8 @@ export const useFile = (fileConfig: FileUpload) => {
}, [handleLocalFileUpload]) }, [handleLocalFileUpload])
return { return {
handleAddOrUpdateFiles, handleAddFile,
handleUpdateFile,
handleRemoveFile, handleRemoveFile,
handleReUploadFile, handleReUploadFile,
handleLoadFileFromLink, handleLoadFileFromLink,

View File

@ -43,8 +43,6 @@ export const useFileStore = () => {
type FileProviderProps = { type FileProviderProps = {
children: React.ReactNode children: React.ReactNode
isPublicAPI?: boolean
url?: string
onChange?: (files: FileEntity[]) => void onChange?: (files: FileEntity[]) => void
} }
export const FileContextProvider = ({ export const FileContextProvider = ({