Dran n drop file onto commander (for upload

ui2/README.md

@@ -1 +1,22 @@
 # UI2
+
+Server's REST API base url is read from `.env.development.local` file:
+
+```
+VITE_BASE_URL=http://localhost:8000/
+```
+
+In order to start in dev mode as user `admin` (without authentication)
+use `VITE_REMOTE_USER` and `VITE_REMOTE_GROUPS` variables in .env.development.local` file:
+
+```
+VITE_REMOTE_USER=admin
+VITE_REMOTE_GROUPS=admin
+VITE_BASE_URL=http://localhost:8000/
+```
+
+Start in dev mode (on port 5173):
+
+```
+yarn dev
+```

ui2/src/components/Commander/Commander.tsx

@@ -13,6 +13,7 @@ import {
   selectPagination,
   selectLastPageSize,
   selectCurrentFolderID,
+  selectCurrentFolder,
   selectCommanderPageSize,
   selectCommanderPageNumber,
   fetchPaginatedDocument
@@ -23,6 +24,7 @@ import type {NType, NodeType, PanelMode} from "@/types"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import Pagination from "@/components/Pagination"
 import PanelContext from "@/contexts/PanelContext"
+import drop_files from "@/components/modals/DropFiles"
 import {selectContentHeight} from "@/slices/sizes"
 import classes from "./Commander.module.css"
 
@@ -40,6 +42,9 @@ export default function Commander() {
   const currentNodeID = useSelector((state: RootState) =>
     selectCurrentFolderID(state, mode)
   )
+  const currentFolder = useSelector((state: RootState) =>
+    selectCurrentFolder(state, mode)
+  )
   const pagination = useSelector((state: RootState) =>
     selectPagination(state, mode)
   )
@@ -127,14 +132,27 @@ export default function Commander() {
       )
     }
   }
+  const onDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    console.log("something is being dragged over")
+  }
+
+  const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+
+    drop_files({
+      source_files: event.dataTransfer.files,
+      target: currentFolder!
+    }).then(() => {})
+  }
 
   const nodes = data.map((n: NodeType) => (
     <Node onClick={onClick} key={n.id} node={n} />
   ))
 
   if (nodes.length > 0) {
     return (
-      <div>
+      <div onDragOver={onDragOver} onDrop={onDrop}>
         <FolderNodeActions />
         <Breadcrumbs onClick={onClick} />
         <Stack

ui2/src/components/Commander/UploadButton.tsx

@@ -22,7 +22,7 @@ export default function UploadButton() {
       selectCurrentFolder(state, mode) as FolderType | undefined
   )
 
-  const onUpload = (files: File[]) => {
+  const onUpload = (files: FileList) => {
     if (!files) {
       console.error("Empty array for uploaded files")
       return

ui2/src/components/modals/DropFiles.tsx

@@ -12,7 +12,7 @@ import {nodeAdded} from "@/slices/dualPanel/dualPanel"
 import PanelContext from "@/contexts/PanelContext"
 
 type Args = {
-  source_files: File[]
+  source_files: FileList | File[]
   target: FolderType
   onOK: (node: NodeType) => void
   onCancel: (msg?: string) => void
@@ -74,7 +74,7 @@ const DropFilesModal = ({source_files, target, onOK, onCancel}: Args) => {
 }
 
 type DropFileArgs = {
-  source_files: File[]
+  source_files: FileList | File[]
   target: FolderType
 }