@noya-app/noya-file-explorer 0.0.2

package/src/MediaCollection.tsx

@@ -0,0 +1,839 @@
+/* eslint-disable @shopify/prefer-early-return */
+import {
+  ActionMenu,
+  CollectionProps,
+  CollectionRef,
+  CollectionRenderActionProps,
+  CollectionThumbnailProps,
+  CollectionViewType,
+  createSectionedMenu,
+  cssVars,
+  FileExplorerCollection,
+  FileExplorerDetail,
+  FileExplorerEmptyState,
+  FileExplorerLayout,
+  FileExplorerUploadButton,
+  ListView,
+  MediaThumbnail,
+} from "@noya-app/noya-designsystem";
+import {
+  DownloadIcon,
+  FolderIcon,
+  InputIcon,
+  OpenInNewWindowIcon,
+  ResetIcon,
+  TrashIcon,
+  UpdateIcon,
+  UploadIcon,
+} from "@noya-app/noya-icons";
+import {
+  MultiplayerPatchMetadata,
+  useAsset,
+  useAssetManager,
+  useAssets,
+} from "@noya-app/noya-multiplayer-react";
+import { MediaItem, MediaMap } from "@noya-app/noya-schemas";
+import { groupBy, isDeepEqual } from "@noya-app/noya-utils";
+import {
+  downloadUrl,
+  memoGeneric,
+  useControlledOrUncontrolled,
+} from "@noya-app/react-utils";
+import { fileOpen } from "browser-fs-access";
+import {
+  forwardRef,
+  memo,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  createMediaAsset,
+  createMediaFile,
+  createMediaFolder,
+  createMediaItemTree,
+  PLACEHOLDER_ITEM_NAME,
+  rootMediaItem,
+  rootMediaItemName,
+} from "./utils/mediaItemTree";
+
+import { path } from "imfs";
+import React from "react";
+import {
+  deleteMediaItems,
+  ExpandedMap,
+  FileKindFilter,
+  getDepthMap,
+  getVisibleItems,
+  moveMediaInsideFolder,
+  moveUpAFolder,
+  updateExpandedMap,
+  validateMediaItemRename,
+} from "./utils/files";
+
+const MediaThumbnailInternal = memoGeneric(
+  ({ item, selected }: CollectionThumbnailProps<MediaItem>) => {
+    const asset = useAsset(item.kind === "asset" ? item.assetId : undefined);
+    const isRoot = item.id === rootMediaItem.id;
+    const isFolder = item.kind === "folder";
+    return (
+      <MediaThumbnail
+        contentType={asset?.contentType}
+        iconName={isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : undefined}
+        url={asset?.url}
+        selected={selected}
+      />
+    );
+  }
+);
+
+type MenuAction =
+  | "preview"
+  | "download"
+  | "upload"
+  | "rename"
+  | "replace"
+  | "delete"
+  | "move"
+  | "addFolder";
+
+export type MediaCollectionRef = {
+  upload: (selectedId: string) => void;
+  delete: (selectedIds: string[]) => void;
+  download: (selectedItems: MediaItem[]) => void;
+  rename: (selectedItemId: string) => void;
+  addFolder: (currentFolderId: string) => void;
+  addFile: (currentFolderId?: string) => void;
+  moveUpAFolder: (selectedIds: string[]) => void;
+  replace: (selectedItem: MediaItem) => void;
+  preview: (selectedItems: MediaItem[]) => void;
+};
+
+type MediaCollectionProps = {
+  onSelectionChange?: (
+    selectedIds: string[],
+    event?: ListView.ClickInfo
+  ) => void;
+  selectedIds?: string[];
+  media: MediaMap;
+  setMedia: (
+    metadata: Partial<MultiplayerPatchMetadata>,
+    media: MediaMap
+  ) => void;
+  /** @default "list" */
+  viewType?: CollectionViewType;
+  /**
+   * Whether to show assets or directories or all media items
+   *
+   * @default "all"
+   * */
+  fileKindFilter?: FileKindFilter;
+  /**
+   * Whether to show the root item
+   *
+   * @default false
+   * */
+  showRootItem?: boolean;
+  /** Whether to expand all directories by default */
+  initialExpanded?: ExpandedMap;
+  /**
+   * Callback for when an item is double-clicked
+   */
+  onDoubleClickItem?: (mediaItemId: string) => void;
+  /**
+   * If provided, only show items that are descendants of this folder
+   */
+  rootItemId?: string;
+  title?: ReactNode;
+  right?: ReactNode;
+  className?: string;
+  showUploadButton?: boolean;
+  /**
+   * If true, show all descendants of all directories within a collection
+   * @default true
+   * */
+  showAllDescendants?: boolean;
+  renderAction?: Exclude<
+    CollectionProps<MediaItem, MenuAction>["renderAction"],
+    "menu"
+  >;
+  /** @default false */
+  sortable?: boolean;
+} & Pick<
+  CollectionProps<MediaItem, MenuAction>,
+  "size" | "expandable" | "renamable" | "scrollable" | "renderEmptyState"
+>;
+
+export const MediaCollection = memo(
+  forwardRef<MediaCollectionRef, MediaCollectionProps>(function MediaCollection(
+    {
+      onSelectionChange,
+      selectedIds: selectedIdsProp,
+      media,
+      setMedia,
+      viewType = "list",
+      fileKindFilter = "all",
+      showRootItem = false,
+      initialExpanded,
+      expandable = true,
+      renamable = true,
+      onDoubleClickItem,
+      rootItemId = rootMediaItem.id,
+      title,
+      size = "medium",
+      right,
+      renderAction: renderActionProp,
+      className,
+      showUploadButton = true,
+      showAllDescendants = true,
+      scrollable = false,
+      sortable = false,
+      renderEmptyState,
+    },
+    ref
+  ) {
+    const tree = useMemo(() => createMediaItemTree(media), [media]);
+    const [tempItem, setTempItem] = useState<[string, MediaItem] | undefined>(
+      undefined
+    );
+    const treeWithTempItem = useMemo(
+      () =>
+        createMediaItemTree({
+          ...media,
+          ...(tempItem ? { [tempItem[0]]: tempItem[1] } : {}),
+        }),
+      [media, tempItem]
+    );
+    const [selectedIds, setSelectedIds] = useControlledOrUncontrolled<string[]>(
+      {
+        defaultValue: [],
+        value: selectedIdsProp,
+        onChange: onSelectionChange,
+      }
+    );
+    const assetManager = useAssetManager();
+    const assets = useAssets();
+    const [expandedMap, setExpandedMap] = useState<ExpandedMap>({});
+    const visibleItems = useMemo(
+      () =>
+        getVisibleItems({
+          expandedMap,
+          fileKindFilter: fileKindFilter,
+          rootItemId,
+          tree: treeWithTempItem,
+          showAllDescendants,
+          showRootItem,
+        }),
+      [
+        expandedMap,
+        fileKindFilter,
+        rootItemId,
+        treeWithTempItem,
+        showAllDescendants,
+        showRootItem,
+      ]
+    );
+    const depthMap = useMemo(
+      () => getDepthMap(rootMediaItem, treeWithTempItem, showAllDescendants),
+      [treeWithTempItem, showAllDescendants]
+    );
+    const collectionRef = useRef<CollectionRef>(null);
+    const selectedMediaItems = useMemo(
+      () =>
+        treeWithTempItem.mediaItemsWithRoot.filter((item) =>
+          selectedIds.includes(item.id)
+        ),
+      [treeWithTempItem, selectedIds]
+    );
+
+    const groupedItems = groupBy(selectedMediaItems, (item) => item.kind);
+    const selectedAssetItems = groupedItems.asset ?? [];
+    const selectedFolderItems = groupedItems.folder ?? [];
+
+    const singleItemSelected = selectedMediaItems.length === 1;
+    const onlyAssetsSelected =
+      selectedAssetItems.length > 0 &&
+      selectedAssetItems.length === selectedMediaItems.length;
+    const onlyFoldersSelected =
+      selectedFolderItems.length > 0 &&
+      selectedFolderItems.length === selectedMediaItems.length;
+    const onlySingleFolderSelected =
+      onlyFoldersSelected && selectedFolderItems.length === 1;
+    const onlySingleAssetSelected =
+      onlyAssetsSelected && selectedAssetItems.length === 1;
+    const rootSelected = selectedIds.includes(rootMediaItem.id);
+    const sameParentSelected = selectedMediaItems.every((item) => {
+      const itemPath = tree.idToPathMap.get(item.id);
+      const firstSelectedPath = tree.idToPathMap.get(selectedIds[0]);
+      if (!itemPath || !firstSelectedPath) return false;
+      return itemPath.startsWith(path.dirname(firstSelectedPath));
+    });
+
+    // Convert size prop to grid size if in grid view
+    const gridSize = useMemo(() => {
+      if (viewType === "grid") {
+        return size;
+      }
+      return "medium";
+    }, [viewType, size]);
+
+    useEffect(() => {
+      if (initialExpanded) {
+        setExpandedMap(initialExpanded);
+      }
+    }, [initialExpanded]);
+
+    // Handle expansion state
+    const handleExpanded = useCallback(
+      (item: MediaItem) => {
+        if (!expandable) return undefined;
+        if (item.kind !== "folder") return undefined;
+        if (item.id === rootMediaItem.id) return undefined;
+        return expandedMap[item.id] ?? false;
+      },
+      [expandedMap, expandable]
+    );
+
+    const handleDelete = useCallback(
+      (selectedIds: string[]) => {
+        const newMedia = deleteMediaItems({
+          selectedIds,
+          media,
+          tree,
+        });
+        setSelectedIds([rootMediaItem.id]);
+        setMedia({ name: "Delete items", timestamp: Date.now() }, newMedia);
+      },
+      [media, setMedia, setSelectedIds, tree]
+    );
+
+    const onRename = useCallback(
+      (selectedItem: MediaItem, newName: string) => {
+        if (!renamable) return;
+        const selectedItemPath = treeWithTempItem.idToPathMap.get(
+          selectedItem.id
+        );
+        if (!selectedItemPath) return;
+        const mediaWithTempItem = {
+          ...media,
+          ...(tempItem ? { [tempItem[0]]: tempItem[1] } : {}),
+        };
+        const renameIsValid = validateMediaItemRename({
+          basename: newName,
+          selectedItemPath,
+          media: mediaWithTempItem,
+        });
+        if (!renameIsValid) {
+          setTempItem(undefined);
+          return;
+        }
+        const mediaClone = { ...media };
+        delete mediaClone[selectedItemPath];
+        setMedia(
+          { name: "Rename media item", timestamp: Date.now() },
+          {
+            ...mediaClone,
+            [path.join(path.dirname(selectedItemPath), newName)]: selectedItem,
+          }
+        );
+        setTempItem(undefined);
+      },
+      [media, renamable, setMedia, tempItem, treeWithTempItem.idToPathMap]
+    );
+
+    const handleAddFolder = useCallback(
+      (currentFolderId: string) => {
+        const newFolder = createMediaFolder();
+        const currentFolderPath = tree.idToPathMap.get(currentFolderId);
+        if (!currentFolderPath) return;
+        setTempItem([
+          path.join(currentFolderPath, PLACEHOLDER_ITEM_NAME),
+          newFolder,
+        ]);
+        setTimeout(() => {
+          collectionRef.current?.editName(newFolder.id);
+        }, 50);
+      },
+      [tree]
+    );
+
+    const handleAddFile = useCallback(
+      (currentFolderId?: string) => {
+        const newFile = createMediaFile({
+          content: "",
+          encoding: "utf-8",
+        });
+        const currentFolderPath = tree.idToPathMap.get(
+          currentFolderId ?? rootMediaItem.id
+        );
+        if (!currentFolderPath) return;
+        setTempItem([
+          path.join(currentFolderPath, PLACEHOLDER_ITEM_NAME),
+          newFile,
+        ]);
+        setTimeout(() => {
+          collectionRef.current?.editName(newFile.id);
+        }, 50);
+      },
+      [tree.idToPathMap]
+    );
+
+    const handleMoveUpAFolder = useCallback(
+      (selectedIds: string[]) => {
+        const newMedia = moveUpAFolder({
+          tree,
+          media,
+          selectedIds,
+        });
+        if (!newMedia) return;
+        setMedia({ name: "Move items", timestamp: Date.now() }, newMedia);
+      },
+      [media, tree, setMedia]
+    );
+
+    const handleUpload = useCallback(
+      async (selectedId: string) => {
+        try {
+          const files = await fileOpen({ multiple: true });
+          if (!files || !Array.isArray(files) || files.length === 0) return;
+
+          const parentPath = tree.idToPathMap.get(selectedId);
+          if (!parentPath) return;
+
+          // Create assets in parallel for better performance
+          const uploadPromises = files.map(async (file) => {
+            const asset = await assetManager.create(file);
+            const assetPath = path.join(parentPath, path.basename(file.name));
+            return {
+              assetPath,
+              asset: createMediaAsset({ assetId: asset.id }),
+            };
+          });
+
+          const newMediaMap = await Promise.all(uploadPromises);
+
+          setMedia(
+            { name: "Add media items", timestamp: Date.now() },
+            {
+              ...media,
+              ...Object.fromEntries(
+                newMediaMap.map(({ assetPath, asset }) => [assetPath, asset])
+              ),
+            }
+          );
+        } catch (error) {
+          console.error("Failed to upload files:", error);
+        }
+      },
+      [tree.idToPathMap, setMedia, media, assetManager]
+    );
+
+    const handleDownload = useCallback(
+      async (selectedItems: MediaItem[]) => {
+        const downloadPromises = selectedItems
+          .filter((item) => item.kind === "asset")
+          .map(async (item) => {
+            const asset = assets.find((a) => a.id === item.assetId);
+            if (!asset?.url) return;
+            return downloadUrl(asset.url, tree.getNameForId(item.id));
+          });
+
+        await Promise.all(downloadPromises);
+      },
+      [assets, tree]
+    );
+
+    const handlePreview = useCallback(
+      async (selectedItems: MediaItem[]) => {
+        const previewPromises = selectedItems
+          .filter((item) => item.kind === "asset")
+          .map(async (item) => {
+            const asset = assets.find((a) => a.id === item.assetId);
+            if (!asset?.url) return;
+            return window?.open(asset.url, "_blank");
+          });
+
+        await Promise.all(previewPromises);
+      },
+      [assets]
+    );
+
+    const handleReplace = useCallback(
+      async (selectedItem: MediaItem) => {
+        try {
+          const file = await fileOpen();
+          if (!file) return;
+          // Create the asset
+          const asset = await assetManager.create(file);
+          const oldFile = selectedItem;
+          const oldFilePath = tree.idToPathMap.get(oldFile.id);
+          if (!oldFilePath || oldFile.kind !== "asset") return;
+          setMedia(
+            { name: "Replace media file", timestamp: Date.now() },
+            {
+              ...media,
+              [oldFilePath]: createMediaAsset({
+                ...oldFile,
+                assetId: asset.id,
+              }),
+            }
+          );
+        } catch (error) {
+          console.error("Failed to upload file:", error);
+        }
+      },
+      [media, setMedia, assetManager, tree]
+    );
+
+    const handleRename = useCallback(
+      (selectedItemId: string) => {
+        collectionRef.current?.editName(selectedItemId);
+      },
+      [collectionRef]
+    );
+
+    const handleMoveMediaInsideFolder = useCallback(
+      (sourceItem: MediaItem, targetItem: MediaItem) => {
+        const sourceItemPath = tree.idToPathMap.get(sourceItem.id);
+        const targetItemPath = tree.idToPathMap.get(targetItem.id);
+        if (!sourceItemPath || !targetItemPath) return;
+        const newMedia = moveMediaInsideFolder({
+          sourceItemIds: [sourceItem.id],
+          targetItemId: targetItem.id,
+          media,
+          tree,
+        });
+        setMedia(
+          {
+            name: "Move media file inside folder",
+            timestamp: Date.now(),
+          },
+          newMedia
+        );
+      },
+      [media, setMedia, tree]
+    );
+
+    const assetContextMenuItems = useMemo(() => {
+      return createSectionedMenu<MenuAction>(
+        [
+          !rootSelected &&
+            singleItemSelected && {
+              title: "Rename",
+              value: "rename",
+              icon: <InputIcon />,
+            },
+          onlySingleAssetSelected && {
+            title: "Replace",
+            value: "replace",
+            icon: <UpdateIcon />,
+          },
+          !rootSelected && {
+            title: "Delete",
+            value: "delete",
+            icon: <TrashIcon />,
+          },
+        ],
+        [
+          onlySingleFolderSelected && {
+            title: "Add media",
+            value: "upload",
+            icon: <UploadIcon />,
+          },
+          onlySingleFolderSelected && {
+            title: "Add a Folder",
+            value: "addFolder",
+            icon: <FolderIcon />,
+          },
+          onlyAssetsSelected &&
+            tree.mediaItemsWithRoot.length > 0 && {
+              title: "Download",
+              value: "download",
+              icon: <DownloadIcon />,
+            },
+          onlySingleAssetSelected && {
+            title: "Preview",
+            value: "preview",
+            icon: <OpenInNewWindowIcon />,
+          },
+        ],
+        [
+          !rootSelected &&
+            sameParentSelected && {
+              title: "Move up a folder",
+              value: "move",
+              icon: <ResetIcon />,
+            },
+        ]
+      );
+    }, [
+      rootSelected,
+      singleItemSelected,
+      onlySingleAssetSelected,
+      onlySingleFolderSelected,
+      onlyAssetsSelected,
+      tree.mediaItemsWithRoot.length,
+      sameParentSelected,
+    ]);
+
+    const handleMenuAction = useCallback(
+      async (action: MenuAction, selectedItems: MediaItem[]) => {
+        if (selectedItems.length === 0) return;
+
+        switch (action) {
+          case "rename":
+            handleRename(selectedItems[0].id);
+            return;
+          case "delete":
+            handleDelete(selectedIds);
+            return;
+          case "replace":
+            handleReplace(selectedItems[0]);
+            return;
+          case "upload":
+            handleUpload(selectedItems[0].id);
+            return;
+          case "addFolder":
+            handleAddFolder(selectedItems[0].id);
+            return;
+          case "preview":
+            handlePreview(selectedItems);
+            return;
+          case "download":
+            handleDownload(selectedItems);
+            return;
+          case "move":
+            handleMoveUpAFolder(selectedIds);
+            return;
+        }
+      },
+      [
+        handleRename,
+        handleDelete,
+        selectedIds,
+        handleReplace,
+        handleUpload,
+        handleAddFolder,
+        handlePreview,
+        handleDownload,
+        handleMoveUpAFolder,
+      ]
+    );
+
+    const handleSetExpanded = useCallback(
+      (item: MediaItem, expanded: boolean) => {
+        setExpandedMap((prev) =>
+          updateExpandedMap({
+            item,
+            expanded,
+            expandable,
+            expandedMap: prev,
+            tree,
+          })
+        );
+      },
+      [expandable, tree]
+    );
+
+    const renderAction = useMemo(() => {
+      if (renderActionProp) return renderActionProp;
+      return ({
+        selected,
+        onOpenChange,
+      }: CollectionRenderActionProps<MediaItem>) => (
+        <ActionMenu
+          menuItems={assetContextMenuItems}
+          onSelect={(action) => handleMenuAction(action, selectedMediaItems)}
+          selected={selected}
+          onOpenChange={onOpenChange}
+          style={{
+            backgroundColor: selected
+              ? cssVars.colors.primaryPastel
+              : "transparent",
+          }}
+        />
+      );
+    }, [
+      assetContextMenuItems,
+      handleMenuAction,
+      renderActionProp,
+      selectedMediaItems,
+    ]);
+
+    useImperativeHandle(ref, () => ({
+      upload: (selectedId: string) => handleUpload(selectedId),
+      delete: handleDelete,
+      download: handleDownload,
+      rename: handleRename,
+      addFolder: handleAddFolder,
+      addFile: handleAddFile,
+      moveUpAFolder: handleMoveUpAFolder,
+      replace: handleReplace,
+      preview: handlePreview,
+      moveMediaInsideFolder: handleMoveMediaInsideFolder,
+    }));
+
+    return (
+      <>
+        <FileExplorerLayout
+          title={title ?? rootMediaItemName}
+          right={
+            <FileExplorerUploadButton
+              showUploadButton={showUploadButton}
+              onUpload={() => handleUpload(rootMediaItem.id)}
+            >
+              {right}
+            </FileExplorerUploadButton>
+          }
+          className={className}
+        >
+          <FileExplorerCollection<MediaItem, MenuAction>
+            ref={collectionRef}
+            scrollable={scrollable}
+            items={visibleItems}
+            viewType={viewType}
+            size={gridSize}
+            getId={(file) => file.id}
+            getName={(file) => {
+              if (file.id === tempItem?.[1].id) {
+                return "";
+              }
+              return treeWithTempItem.getNameForId(file.id);
+            }}
+            expandable={expandable}
+            sortable={sortable}
+            getPlaceholder={(item) => {
+              switch (item.kind) {
+                case "folder":
+                  return "Enter folder name";
+                case "asset":
+                case "file":
+                  return "Enter file name";
+              }
+            }}
+            getExpanded={handleExpanded}
+            setExpanded={handleSetExpanded}
+            getRenamable={(item) => {
+              if (item.id === rootMediaItem.id) return false;
+              return true;
+            }}
+            getDepth={(item) => depthMap[item.id]}
+            menuItems={assetContextMenuItems}
+            onSelectMenuItem={handleMenuAction}
+            onSelectionChange={setSelectedIds}
+            onDoubleClickItem={onDoubleClickItem}
+            onRename={onRename}
+            renamable={renamable}
+            selectedIds={selectedIds}
+            renderThumbnail={(props) => <MediaThumbnailInternal {...props} />}
+            renderAction={renderAction}
+            renderDetail={(file, selected) => {
+              if (file.kind !== "asset") return null;
+              const asset = assets.find((a) => a.id === file.assetId);
+              if (!asset) return null;
+              return (
+                <FileExplorerDetail selected={selected}>
+                  {(asset.size / 1024).toFixed(1)}KB
+                </FileExplorerDetail>
+              );
+            }}
+            renderEmptyState={() =>
+              renderEmptyState?.() ?? <FileExplorerEmptyState />
+            }
+            itemRoleDescription="clickable file item"
+            getDropTargetParentIndex={(overIndex: number) => {
+              const item = visibleItems[overIndex];
+              const parentIndex = visibleItems.findIndex(
+                (i) => i.id === tree.getParentIdForId(item.id)
+              );
+              return parentIndex === -1 ? undefined : parentIndex;
+            }}
+            acceptsDrop={(
+              sourceIndex: number,
+              targetIndex: number,
+              position: string
+            ) => {
+              const sourceItem = visibleItems[sourceIndex];
+              const targetItem = visibleItems[targetIndex];
+
+              if (position !== "inside" || targetItem.kind === "asset") {
+                return false;
+              }
+              const sourcePath = tree.findIndexPath(
+                rootMediaItem,
+                (item) => item.id === sourceItem.id
+              );
+              const targetPath = tree.findIndexPath(
+                rootMediaItem,
+                (item) => item.id === targetItem.id
+              );
+
+              // Don't allow dragging into a descendant
+              if (!sourcePath || !targetPath) return false;
+              if (
+                isDeepEqual(sourcePath, targetPath.slice(0, sourcePath.length))
+              ) {
+                return false;
+              }
+
+              return true;
+            }}
+            onMoveItem={(
+              sourceIndex: number,
+              targetIndex: number,
+              position: string
+            ) => {
+              const sourceItem = visibleItems[sourceIndex];
+              const targetItem = visibleItems[targetIndex];
+              if (position === "inside") {
+                handleMoveMediaInsideFolder(sourceItem, targetItem);
+              }
+            }}
+            onFilesDrop={async (event: React.DragEvent<Element>) => {
+              event.preventDefault();
+
+              const files = Array.from(event.dataTransfer.files);
+              if (files.length === 0) return;
+
+              try {
+                // Upload all dropped files
+                const uploadPromises = files.map(async (file) => {
+                  const asset = await assetManager.create(file);
+                  return {
+                    asset: createMediaAsset({
+                      assetId: asset.id,
+                    }),
+                    name: file.name,
+                  };
+                });
+
+                const newMediaItems = await Promise.all(uploadPromises);
+                const rootItemPath = tree.idToPathMap.get(rootItemId);
+                if (!rootItemPath) return;
+                // Add all the media file references to our state
+                setMedia(
+                  { name: "Add media files", timestamp: Date.now() },
+                  {
+                    ...media,
+                    ...Object.fromEntries(
+                      newMediaItems.map((item) => [
+                        path.join(rootItemPath, item.name),
+                        item.asset,
+                      ])
+                    ),
+                  }
+                );
+              } catch (error) {
+                console.error("Failed to upload dropped files:", error);
+              }
+            }}
+          />
+        </FileExplorerLayout>
+      </>
+    );
+  })
+);