fix: ipfs file upload (#10485)

DimensionDev · Aug 19, 2023 · 919b302 · 919b302
1 parent c3514d6
commit 919b302
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/plugins/FileService/src/SiteAdaptor/contexts/FileManagement/index.tsx b/packages/plugins/FileService/src/SiteAdaptor/contexts/FileManagement/index.tsx
@@ -140,6 +140,7 @@ export const FileManagementProvider = memo(({ children, compositionType }: Props
                 payloadTxID,
                 landingTxID,
             }
+
             await PluginFileServiceRPC.setFileInfo(fileInfo)
             removeUnloadingFile(id)
             refetchFiles()
@@ -157,10 +158,11 @@ export const FileManagementProvider = memo(({ children, compositionType }: Props
         [compositionType, navigate],
     )
 
+    const recentFiles = useMemo(() => files.slice(0, 4), [files])
     const contextValue: FileManagementContextOptions = useMemo(() => {
         return {
             files,
-            recentFiles: files.slice(0, 4),
+            recentFiles,
             refetchFiles,
             uploadingFiles,
             uploadStateMap,
@@ -169,7 +171,7 @@ export const FileManagementProvider = memo(({ children, compositionType }: Props
             setUploadingFiles,
             attachToPost,
         }
-    }, [files, uploadStateMap, uploadingFiles, attachToPost, refetchFiles])
+    }, [files, recentFiles, uploadStateMap, uploadingFiles, attachToPost, refetchFiles, uploadFile])
 
     return <FileManagementContext.Provider value={contextValue}>{children}</FileManagementContext.Provider>
 })

diff --git a/packages/shared/src/UI/components/UploadDropArea/index.tsx b/packages/shared/src/UI/components/UploadDropArea/index.tsx
@@ -1,7 +1,7 @@
 import { Icons } from '@masknet/icons'
 import { useCustomSnackbar, makeStyles } from '@masknet/theme'
 import { alpha, Button, Typography } from '@mui/material'
-import { type HTMLProps, memo, useCallback } from 'react'
+import { type HTMLProps, memo, useCallback, useRef } from 'react'
 import { useDropArea } from 'react-use'
 import { useSharedI18N } from '../../../index.js'
 
@@ -85,13 +85,16 @@ export const UploadDropArea = memo(
                 onSelectFile(files[0])
             }
         }
+        const handleFilesRef = useRef<(file: File[] | FileList | null) => void>()
+        handleFilesRef.current = handleFiles
+
         const selectFile = useCallback(() => {
             const input = document.createElement('input')
             input.type = 'file'
             input.hidden = true
             if (accept) input.accept = accept
             input.addEventListener('input', function onInput(event) {
-                handleFiles((event.currentTarget as any).files as FileList)
+                handleFilesRef.current?.((event.currentTarget as any).files as FileList)
                 input.removeEventListener('input', onInput)
                 document.body.removeChild(input)
             })