Wrap app in drop handler for image to be put anywhere

package.json

@@ -21,6 +21,7 @@
     "mst-persist": "^0.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-markdown": "^9.0.1",
     "react-scrollable-feed": "^2.0.1",
     "remark-gfm": "^4.0.0",

src/App.tsx

@@ -9,6 +9,7 @@ import ToastCenter from './components/ToastCenter'
 import PwaReloadPrompt from './components/PwaReloadPrompt'
 import ModalSelector from './components/ModalSelector'
 import ModelRefreshButton from './components/ModelRefreshButton'
+import Dropzone from './components/Dropzone'
 
 import { settingStore } from './models/SettingStore'
 
@@ -65,8 +66,8 @@ const Navbar = observer(() => {
 
 function App() {
   return (
-    <div className="grid max-h-dvh min-h-dvh">
-      <div className="container drawer drawer-end flex max-h-screen flex-col place-self-center p-3">
+    <Dropzone>
+      <div className="container drawer drawer-end mx-auto flex max-h-screen flex-col place-self-center p-3">
         <Navbar />
 
         <Drawer />
@@ -87,7 +88,7 @@ function App() {
           </main>
         </section>
       </div>
-    </div>
+    </Dropzone>
   )
 }
 

src/components/Dropzone.tsx

@@ -0,0 +1,31 @@
+import { PropsWithChildren } from 'react'
+import { useDropzone } from 'react-dropzone'
+
+import DocumentDownload from '../icons/DocumentDownload'
+import { chatStore } from '../models/ChatStore'
+
+const Dropzone = ({ children }: PropsWithChildren) => {
+  const onDrop = ([file]: File[]) => {
+    chatStore.selectedChat?.setPreviewImage(file)
+  }
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, maxFiles: 1 })
+
+  return (
+    <div className="grid max-h-dvh min-h-dvh" {...getRootProps()} onClick={e => e.preventDefault()}>
+      <input {...getInputProps()} />
+
+      {isDragActive && (
+        <div className="absolute bottom-0 left-0 right-0 top-0 z-[999] flex bg-base-content/30">
+          <div className="m-auto h-44 w-44">
+            <DocumentDownload />
+          </div>
+        </div>
+      )}
+
+      {children}
+    </div>
+  )
+}
+
+export default Dropzone

src/icons/DocumentDownload.tsx

@@ -0,0 +1,18 @@
+export default function DocumentDownload() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="h-44 w-44"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m.75 12 3 3m0 0 3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+      />
+    </svg>
+  )
+}