fix: set constrain for uploading packages only works in the Plugins tab

web/app/components/plugins/plugin-page/index.tsx

@@ -36,23 +36,24 @@ const PluginPage = ({
   const { setShowPluginSettingModal } = useModalContext() as any
   const [currentFile, setCurrentFile] = useState<File | null>(null)
   const containerRef = usePluginPageContext(v => v.containerRef)
-
-  const { dragging, fileUploader, fileChangeHandle, removeFile } = useUploader({
-    onFileChange: setCurrentFile,
-    containerRef,
-  })
-
   const options = useMemo(() => {
     return [
       { value: 'plugins', text: t('common.menus.plugins') },
       { value: 'discover', text: 'Explore Marketplace' },
     ]
   }, [t])
-
   const [activeTab, setActiveTab] = useTabSearchParams({
     defaultTab: options[0].value,
   })
 
+  const uploaderProps = useUploader({
+    onFileChange: setCurrentFile,
+    containerRef,
+    enabled: activeTab === 'plugins',
+  })
+
+  const { dragging, fileUploader, fileChangeHandle, removeFile } = uploaderProps
+
   return (
     <div
       ref={containerRef}
@@ -138,21 +139,21 @@ const PluginPage = ({
             <span className="system-xs-regular">Drop plugin package here to install</span>
           </div>
           {currentFile && (
-            <InstallFromLocalPackage file={currentFile} onClose={removeFile} />
+            <InstallFromLocalPackage file={currentFile} onClose={removeFile ?? (() => {})} />
           )}
+          <input
+            ref={fileUploader}
+            className="hidden"
+            type="file"
+            id="fileUploader"
+            accept='.difypkg'
+            onChange={fileChangeHandle ?? (() => {})}
+          />
         </>
       )}
       {
         activeTab === 'discover' && marketplace
       }
-      <input
-        ref={fileUploader}
-        className="hidden"
-        type="file"
-        id="fileUploader"
-        accept='.difypkg'
-        onChange={fileChangeHandle}
-      />
     </div>
   )
 }

web/app/components/plugins/plugin-page/use-uploader.ts

@@ -3,9 +3,10 @@ import { useEffect, useRef, useState } from 'react'
 type UploaderHookProps = {
   onFileChange: (file: File | null) => void
   containerRef: React.RefObject<HTMLDivElement>
+  enabled?: boolean
 }
 
-export const useUploader = ({ onFileChange, containerRef }: UploaderHookProps) => {
+export const useUploader = ({ onFileChange, containerRef, enabled = true }: UploaderHookProps) => {
   const [dragging, setDragging] = useState(false)
   const fileUploader = useRef<HTMLInputElement>(null)
 
@@ -39,19 +40,26 @@ export const useUploader = ({ onFileChange, containerRef }: UploaderHookProps) =
       onFileChange(files[0])
   }
 
-  const fileChangeHandle = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const fileChangeHandle = enabled
-    const file = e.target.files?.[0] || null
+    ? (e: React.ChangeEvent<HTMLInputElement>) => {
-    onFileChange(file)
+      const file = e.target.files?.[0] || null
-  }
+      onFileChange(file)
+    }
+    : null
 
-  const removeFile = () => {
+  const removeFile = enabled
-    if (fileUploader.current)
+    ? () => {
-      fileUploader.current.value = ''
+      if (fileUploader.current)
+        fileUploader.current.value = ''
 
-    onFileChange(null)
+      onFileChange(null)
-  }
+    }
+    : null
 
   useEffect(() => {
+    if (!enabled)
+      return
+
     const current = containerRef.current
     if (current) {
       current.addEventListener('dragenter', handleDragEnter)
@@ -67,10 +75,10 @@ export const useUploader = ({ onFileChange, containerRef }: UploaderHookProps) =
         current.removeEventListener('drop', handleDrop)
       }
     }
-  }, [containerRef])
+  }, [containerRef, enabled])
 
   return {
-    dragging,
+    dragging: enabled ? dragging : false,
     fileUploader,
     fileChangeHandle,
     removeFile,