corrected folder upload and virtualization

src/workspaces/widgets/FileBrowser/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState, useCallback } from 'react';
 import { FolderPlus, Upload, FolderUp, Scissors, Copy, ClipboardPaste, Trash2, X, Check } from 'lucide-react';
 
 type ToolbarProps = {
@@ -28,11 +28,9 @@ export const Toolbar = ({
   const [folderName, setFolderName] = useState('');
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const folderInputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    const input = folderInputRef.current;
-    if (!input) return;
-    input.setAttribute('webkitdirectory', '');
+  const setFolderInputRef = useCallback((input: HTMLInputElement | null) => {
+    folderInputRef.current = input;
+    if (input) input.setAttribute('webkitdirectory', '');
   }, []);
 
   const handleCreate = () => {
@@ -43,6 +41,34 @@ export const Toolbar = ({
     setShowInput(false);
   };
 
+  const hiddenInputs = (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        className="hidden"
+        onChange={(ev) => {
+          if (ev.target.files?.length) {
+            onUpload(ev.target.files);
+            ev.target.value = '';
+          }
+        }}
+      />
+      <input
+        ref={setFolderInputRef}
+        type="file"
+        className="hidden"
+        onChange={(ev) => {
+          if (ev.target.files?.length) {
+            onUpload(ev.target.files);
+            ev.target.value = '';
+          }
+        }}
+      />
+    </>
+  );
+
   if (selectionCount > 0) {
     return (
       <div className="flex items-center gap-1">
@@ -87,6 +113,7 @@ export const Toolbar = ({
         >
           <X className="h-4 w-4" />
         </button>
+        {hiddenInputs}
       </div>
     );
   }
@@ -169,29 +196,7 @@ export const Toolbar = ({
         </button>
       )}
 
-      <input
-        ref={fileInputRef}
-        type="file"
-        multiple
-        className="hidden"
-        onChange={(ev) => {
-          if (ev.target.files?.length) {
-            onUpload(ev.target.files);
-            ev.target.value = '';
-          }
-        }}
-      />
-      <input
-        ref={folderInputRef}
-        type="file"
-        className="hidden"
-        onChange={(ev) => {
-          if (ev.target.files?.length) {
-            onUpload(ev.target.files);
-            ev.target.value = '';
-          }
-        }}
-      />
+      {hiddenInputs}
     </div>
   );
 };