file upload from desktop

cms/Files/Explorer.tsx

@@ -13,6 +13,9 @@ import {
 import { useClient, useQuery } from '@based/react'
 import { useRoute } from 'kabouter'
 import { Search } from './Search'
+import { FileDrop } from 'react-file-drop'
+import './FileCss.css'
+import { useUploadFile } from '../Hooks/useUploadFile'
 
 const FILTER_FIELDS = ['type', 'ancestors', 'descendants', 'aliases']
 
@@ -44,7 +47,7 @@ const filterFolder = (data, rootId) => {
   return [...indexed, ...unindexed]
 }
 
-export const Explorer = ({}) => {
+export const Explorer = ({ onChange }) => {
   const route = useRoute('[folder]')
   const path = route.query.folder as string
 
@@ -56,6 +59,12 @@ export const Explorer = ({}) => {
 
   const dragOverItem = useRef<string>()
   const containerRef = useRef<any>()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const onFileInputChange = (event) => {
+    const { files } = event.target
+    console.log(files)
+  }
 
   const { data, loading: dataLoading } = useQuery('db', {
     $id: section,
@@ -237,7 +246,7 @@ export const Explorer = ({}) => {
   })
 
   return (
-    <styled.div>
+    <styled.div style={{ position: 'relative' }}>
       <styled.div>
         <Breadcrumbs
           data={Object.fromEntries(path.split('/').map((i) => [i, i]))}
@@ -257,48 +266,75 @@ export const Explorer = ({}) => {
           }}
         />
       </styled.div>
-
-      <styled.div
-        ref={containerRef}
-        style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          // gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 100px))',
-          height: '100%',
-          gap: 30,
+      <input
+        type="file"
+        style={{ display: 'none' }}
+        onChange={onFileInputChange}
+        ref={fileInputRef}
+      />
+      <FileDrop
+        // onFrameDragEnter={(event) => console.log('onFrameDragEnter', event)}
+        // onFrameDragLeave={(event) => console.log('onFrameDragLeave', event)}
+        // onFrameDrop={(event) => {
+        //   console.log('onFrameDrop!', event)
+        //   // setDragging(false)
+        // }}
+        // onDragOver={(event) => console.log('onDragOver', event)}
+        // onDragLeave={(event) => {
+        //   console.log('onDragLeave', event)
+        //   setDragging(false)
+        // }}
+        onDrop={(files, event) => {
+          console.log('dropped')
+          for (const i in files) {
+            onChange(files[i])
+          }
         }}
       >
-        {data?.files?.length > 0 &&
-          //@ts-ignore
-          filterFolder(data?.files, section).map((item, i) => {
-            return (
-              <div
-                key={item.id}
-                id={item.id}
-                onPointerDown={(e) => dragStart(e, i)}
-                style={{ maxHeight: 130 }}
-              >
+        <styled.div
+          // onDrop={() => setDragging(false)}
+          ref={containerRef}
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            height: '100%',
+            gap: 30,
+            // gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 100px))',
+          }}
+        >
+          {data?.files?.length > 0 &&
+            //@ts-ignore
+            filterFolder(data?.files, section).map((item, i) => {
+              return (
                 <div
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
+                  key={item.id}
+                  id={item.id}
+                  onPointerDown={(e) => dragStart(e, i)}
+                  style={{ maxHeight: 130 }}
                 >
-                  <Tile
-                    setOpenSearch={setOpenSearch}
-                    folder={item.id?.slice(0, 2) === 'di'}
-                    selected={item.id === selected}
-                    item={item}
-                    setOpenSidebar={setOpenSidebar}
-                    setSelected={setSelected}
-                  />
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <Tile
+                      setOpenSearch={setOpenSearch}
+                      folder={item.id?.slice(0, 2) === 'di'}
+                      selected={item.id === selected}
+                      item={item}
+                      setOpenSidebar={setOpenSidebar}
+                      setSelected={setSelected}
+                    />
+                  </div>
                 </div>
-              </div>
-            )
-          })}
-        <div id="last" style={{ flexGrow: 1 }} />
-      </styled.div>
+              )
+            })}
+          <div id="last" style={{ flexGrow: 1 }} />
+        </styled.div>
+      </FileDrop>
+
       <SidePanel.Root open={openSidebar}>
         <SidePanel.Content>
           <SidePanel.Title closeFunc={() => setOpenSidebar(false)}>

cms/Files/FileCss.css

@@ -0,0 +1,49 @@
+/* Demo.css */
+
+.file-drop {
+  /* relatively position the container bc the contents are absolute */
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 30;
+}
+
+.file-drop > .file-drop-target {
+  /* basic styles */
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  border-radius: 2px;
+
+  /* horizontally and vertically center all content */
+  display: flex;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+
+  flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+
+  align-items: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+
+  justify-content: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+
+  align-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+
+  text-align: center;
+}

cms/Files/index.tsx

@@ -16,6 +16,7 @@ import { Tile } from './Tile'
 import { Explorer } from './Explorer'
 import { CmsTable } from '../Components/CmsTable'
 import { useRoute } from 'kabouter'
+import { useUploadFile } from '../Hooks/useUploadFile'
 
 export const FileLibrary = () => {
   const client = useClient()
@@ -29,6 +30,7 @@ export const FileLibrary = () => {
   const { width, height } = useWindowResize()
   const [tableWidth, setTableWidth] = useState<number>(600)
   const [tableHeight, setTableHeight] = useState<number>(600)
+  const { handleFileInputChange, status, progress } = useUploadFile()
 
   useEffect(() => {
     setTableWidth(width - 324)
@@ -126,7 +128,11 @@ export const FileLibrary = () => {
               //  columnNamesInRightOrder={arr}
             />
           ) : (
-            <Explorer />
+            <Explorer
+              onChange={handleFileInputChange((file) => {
+                console.log('uploaded file', file)
+              })}
+            />
           )}
         </styled.div>
       </Modal.Root>

cms/Hooks/useUploadFile.ts

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { useClient } from '@based/react'
+
+export function useUploadFile() {
+  const client = useClient()
+  const [status, setStatus] = React.useState<
+    'initial' | 'uploading' | 'success' | 'error'
+  >('initial')
+  const [progress, setProgress] = React.useState(0)
+
+  function handleFileInputChange(
+    successHandler: (uploadedFile: { id: string; src: string } | null) => void
+  ) {
+    return async function (file?: File) {
+      try {
+        if (!file) {
+          successHandler(null)
+          return
+        }
+        setStatus('uploading')
+
+        const { id, src } = await client.stream(
+          'db:file-upload',
+          {
+            contents: file,
+          },
+          (value) => {
+            setProgress(value * 100)
+          }
+        )
+
+        setStatus('success')
+        successHandler({ id, src })
+      } catch {
+        setStatus('error')
+      }
+    }
+  }
+
+  return { status, progress, handleFileInputChange }
+}