drop files modal dialog

ui2/src/components/Commander/UploadButton.tsx

@@ -1,20 +1,42 @@
+import {useSelector} from "react-redux"
 import {FileButton, ActionIcon, Tooltip} from "@mantine/core"
 import {IconUpload} from "@tabler/icons-react"
+import drop_files from "@/components/modals/DropFiles"
+import {useContext} from "react"
+import PanelContext from "@/contexts/PanelContext"
+import {FolderType, PanelMode} from "@/types"
+import {RootState} from "@/app/types"
+import {selectCurrentFolder} from "@/slices/dualPanel/dualPanel"
+
+const MIME_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/tif",
+  "application/pdf"
+].join(",")
 
 export default function UploadButton() {
+  const mode: PanelMode = useContext(PanelContext)
+  const target = useSelector(
+    (state: RootState) =>
+      selectCurrentFolder(state, mode) as FolderType | undefined
+  )
+
   const onUpload = (files: File[]) => {
     if (!files) {
       console.error("Empty array for uploaded files")
       return
     }
+    if (!target) {
+      console.error("Current folder is undefined")
+      return
+    }
+
+    drop_files({source_files: files, target}).then(() => {})
   }
 
   return (
-    <FileButton
-      onChange={onUpload}
-      accept="image/png,image/jpeg,application/pdf"
-      multiple
-    >
+    <FileButton onChange={onUpload} accept={MIME_TYPES} multiple>
       {props => (
         <Tooltip label="Upload" withArrow>
           <ActionIcon {...props} size="lg" variant="default">

ui2/src/components/modals/DropFiles.tsx

@@ -0,0 +1,83 @@
+import {useState} from "react"
+import {createRoot} from "react-dom/client"
+import {Checkbox, MantineProvider, Text} from "@mantine/core"
+import {theme} from "@/app/theme"
+import GenericModal from "@/components/modals/Generic"
+import Error from "@/components/modals/Error"
+import type {NodeType, FolderType} from "@/types"
+import {MODALS} from "@/cconstants"
+import axios, {AxiosError} from "axios"
+import {store} from "@/app/store"
+
+type Args = {
+  source_files: File[]
+  target: FolderType
+  onOK: (node: NodeType) => void
+  onCancel: (msg?: string) => void
+}
+
+const DropFilesModal = ({source_files, target, onOK, onCancel}: Args) => {
+  const state = store.getState()
+  const [error, setError] = useState("")
+  const source_titles = [...source_files].map(n => n.name).join(", ")
+  const target_title = target.title
+
+  const handleSubmit = async (signal: AbortSignal) => {
+    return true
+  }
+
+  const handleCancel = () => {
+    // just close the dialog
+    setError("")
+    onCancel()
+  }
+
+  return (
+    <GenericModal
+      modal_title="Upload documents"
+      onSubmit={handleSubmit}
+      onCancel={handleCancel}
+    >
+      Are you sure you want to upload
+      <Text span c="blue">
+        {` ${source_titles} `}
+      </Text>
+      to
+      <Text span c="green">
+        {` ${target_title}`}
+      </Text>
+      ?
+      <Checkbox mt="md" mb="md" label="Skip OCR" />
+      {error && <Error message={error} />}
+    </GenericModal>
+  )
+}
+
+type DropFileArgs = {
+  source_files: File[]
+  target: FolderType
+}
+
+function drop_files({source_files, target}: DropFileArgs) {
+  let modals = document.getElementById(MODALS)
+
+  let promise = new Promise<NodeType>(function (onOK, onCancel) {
+    if (modals) {
+      let dom_root = createRoot(modals)
+      dom_root.render(
+        <MantineProvider theme={theme}>
+          <DropFilesModal
+            source_files={source_files}
+            target={target}
+            onOK={onOK}
+            onCancel={onCancel}
+          />
+        </MantineProvider>
+      )
+    }
+  }) // new Promise...
+
+  return promise
+}
+
+export default drop_files

ui2/src/slices/dualPanel/dualPanel.ts

@@ -331,6 +331,11 @@ export const selectCurrentFolderID = (state: RootState, mode: PanelMode) => {
   return null
 }
 
+export const selectCurrentFolder = createSelector(
+  [selectCurrentFolderID, selectNodesRaw],
+  (folderId, nodes) => nodes?.find(i => i.id == folderId)
+)
+
 export const selectPanelBreadcrumbs = (
   state: RootState,
   mode: PanelMode