|
| 1 | +import {useAppDispatch, useAppSelector} from "@/app/hooks" |
| 2 | +import {apiSlice} from "@/features/api/slice" |
| 3 | +import {uploadFile} from "@/features/files/filesSlice" |
| 4 | +import {generateThumbnail} from "@/features/nodes/thumbnailObjectsSlice" |
| 5 | +import type {UploadFileOutput} from "@/features/nodes/types" |
| 6 | +import {Button, Menu} from "@mantine/core" |
| 7 | +import {useDisclosure} from "@mantine/hooks" |
| 8 | +import {IconUpload} from "@tabler/icons-react" |
| 9 | + |
| 10 | +import { |
| 11 | + SUPPORTED_EXTENSIONS, |
| 12 | + SUPPORTED_MIME_TYPES |
| 13 | +} from "@/features/nodes/constants" |
| 14 | +import {isSupportedFile} from "@/features/nodes/utils" |
| 15 | +import {selectMyPreferences} from "@/features/preferences/storage/preference" |
| 16 | +import {selectCurrentNodeID} from "@/features/ui/uiSlice" |
| 17 | +import useUploadDestinationFolder from "@/hooks/useUploadDestinationFolder" |
| 18 | +import {selectCurrentUser} from "@/slices/currentUser" |
| 19 | +import {IconChevronDown, IconFolder} from "@tabler/icons-react" |
| 20 | +import {useRef, useState} from "react" |
| 21 | +import {useTranslation} from "react-i18next" |
| 22 | +import SupportedFilesInfoModal from "../features/nodes/components/Commander/NodesCommander/SupportedFilesInfoModal" |
| 23 | + |
| 24 | +const MIME_TYPES = [...SUPPORTED_EXTENSIONS, ...SUPPORTED_MIME_TYPES].join(",") |
| 25 | + |
| 26 | +export default function UploadButton() { |
| 27 | + const {t} = useTranslation() |
| 28 | + const dispatch = useAppDispatch() |
| 29 | + const [selectedDestinationID, setSelectedDestinationID] = useState<string>() |
| 30 | + const fileInputRef = useRef<HTMLInputElement>(null) |
| 31 | + const [ |
| 32 | + supportedFilesInfoOpened, |
| 33 | + {open: supportedFilesInfoOpen, close: supportedFilesInfoClose} |
| 34 | + ] = useDisclosure(false) |
| 35 | + |
| 36 | + const folderID = useAppSelector(s => selectCurrentNodeID(s, "main")) |
| 37 | + const currentUser = useAppSelector(selectCurrentUser) |
| 38 | + const userPreferences = useAppSelector(selectMyPreferences) |
| 39 | + |
| 40 | + let destinations = useUploadDestinationFolder() |
| 41 | + |
| 42 | + if ( |
| 43 | + folderID && |
| 44 | + folderID != currentUser.home_folder_id && |
| 45 | + folderID != currentUser.inbox_folder_id |
| 46 | + ) { |
| 47 | + destinations.push({ |
| 48 | + id: folderID, |
| 49 | + label: t("common.current_location", {defaultValue: "Current Location"}), |
| 50 | + icon: IconFolder |
| 51 | + }) |
| 52 | + } |
| 53 | + |
| 54 | + const handleFileChange = async ( |
| 55 | + event: React.ChangeEvent<HTMLInputElement> |
| 56 | + ) => { |
| 57 | + const files = event.target.files |
| 58 | + console.log( |
| 59 | + "File input changed, files:", |
| 60 | + files, |
| 61 | + "destination:", |
| 62 | + selectedDestinationID |
| 63 | + ) |
| 64 | + |
| 65 | + if (!files || files.length === 0 || !selectedDestinationID) { |
| 66 | + console.error("No files selected or no destination") |
| 67 | + return |
| 68 | + } |
| 69 | + |
| 70 | + const fileArray = Array.from(files) |
| 71 | + const validFiles = fileArray.filter(isSupportedFile) |
| 72 | + |
| 73 | + if (validFiles.length === 0) { |
| 74 | + supportedFilesInfoOpen() |
| 75 | + // Reset input |
| 76 | + if (fileInputRef.current) { |
| 77 | + fileInputRef.current.value = "" |
| 78 | + } |
| 79 | + return |
| 80 | + } |
| 81 | + |
| 82 | + for (let i = 0; i < validFiles.length; i++) { |
| 83 | + const result = await dispatch( |
| 84 | + uploadFile({ |
| 85 | + file: validFiles[i], |
| 86 | + refreshTarget: true, |
| 87 | + lang: userPreferences.uploaded_document_lang, |
| 88 | + ocr: false, |
| 89 | + target_id: selectedDestinationID |
| 90 | + }) |
| 91 | + ) |
| 92 | + const newlyCreatedNode = result.payload as UploadFileOutput |
| 93 | + |
| 94 | + if (newlyCreatedNode && newlyCreatedNode.source?.id) { |
| 95 | + const newNodeID = newlyCreatedNode.source?.id |
| 96 | + dispatch(generateThumbnail({node_id: newNodeID, file: validFiles[i]})) |
| 97 | + } |
| 98 | + } |
| 99 | + |
| 100 | + dispatch(apiSlice.util.invalidateTags(["Node"])) |
| 101 | + |
| 102 | + // Reset the file input and destination |
| 103 | + if (fileInputRef.current) { |
| 104 | + fileInputRef.current.value = "" |
| 105 | + } |
| 106 | + setSelectedDestinationID(undefined) |
| 107 | + } |
| 108 | + |
| 109 | + const handleMenuItemClick = (destinationID: string) => { |
| 110 | + console.log("Menu item clicked, destination:", destinationID) |
| 111 | + setSelectedDestinationID(destinationID) |
| 112 | + // Trigger file input click |
| 113 | + setTimeout(() => { |
| 114 | + fileInputRef.current?.click() |
| 115 | + }, 100) |
| 116 | + } |
| 117 | + |
| 118 | + const MenuItems = destinations.map(dest => { |
| 119 | + const Icon = dest.icon |
| 120 | + return ( |
| 121 | + <Menu.Item |
| 122 | + key={dest.id} |
| 123 | + leftSection={<Icon size={16} />} |
| 124 | + onClick={() => handleMenuItemClick(dest.id)} |
| 125 | + > |
| 126 | + {dest.label} |
| 127 | + </Menu.Item> |
| 128 | + ) |
| 129 | + }) |
| 130 | + |
| 131 | + return ( |
| 132 | + <> |
| 133 | + {/* Hidden file input */} |
| 134 | + <input |
| 135 | + ref={fileInputRef} |
| 136 | + type="file" |
| 137 | + accept={MIME_TYPES} |
| 138 | + multiple |
| 139 | + onChange={handleFileChange} |
| 140 | + style={{display: "none"}} |
| 141 | + /> |
| 142 | + |
| 143 | + <Menu shadow="md" width={200}> |
| 144 | + <Menu.Target> |
| 145 | + <Button rightSection={<IconChevronDown size={16} />}> |
| 146 | + <IconUpload size={16} style={{marginRight: 8}} /> |
| 147 | + {t("common.upload", {defaultValue: "Upload"})} |
| 148 | + </Button> |
| 149 | + </Menu.Target> |
| 150 | + |
| 151 | + <Menu.Dropdown> |
| 152 | + <Menu.Label> |
| 153 | + {t("common.upload_to", {defaultValue: "Upload to"})} |
| 154 | + </Menu.Label> |
| 155 | + {MenuItems} |
| 156 | + </Menu.Dropdown> |
| 157 | + </Menu> |
| 158 | + |
| 159 | + {supportedFilesInfoOpened && ( |
| 160 | + <SupportedFilesInfoModal |
| 161 | + opened={supportedFilesInfoOpened} |
| 162 | + onClose={supportedFilesInfoClose} |
| 163 | + /> |
| 164 | + )} |
| 165 | + </> |
| 166 | + ) |
| 167 | +} |
0 commit comments