added drag and drop to file browser

src/components/DragAndDrop.tsx

@@ -0,0 +1,80 @@
+import React from "react"
+import { useState } from "react"
+import { useEffect } from "react"
+import style from "./../style/DragAndDrop.module.scss"
+
+interface Props {
+	onDrop?: ()=>void
+	onEnter?: (event: DragEvent)=>void
+	onLeave?: (event: DragEvent)=>void
+	onDragOver?: (event: DragEvent)=>void
+	handleDrop?: (files: FileList)=>void
+}
+
+const DragAndDrop: React.FC<Props> = (props) => {
+	const dropRef = React.createRef<HTMLDivElement>()
+	const [hover,setHover] = useState(false)
+
+	function handleDragEnter(event: DragEvent) {
+		// console.debug("dragenter",event)
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(true)
+		props.onEnter?.(event)
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		// console.debug("dragleave",event)
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(false)
+		props.onLeave?.(event)
+	}
+
+	function handleDragOver(event:DragEvent) {
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(true)
+		props.onDragOver?.(event)
+	}
+
+	function handleDrop(event: DragEvent) {
+		console.debug("drop",event)
+		event.preventDefault()
+		event.stopPropagation()
+		setHover(false)
+		props.onDrop?.()
+		if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+			props.handleDrop?.(event.dataTransfer.files)
+			// event.dataTransfer.clearData()
+		}
+	}
+
+	useEffect(()=>{
+		if(dropRef.current){
+			console.debug("Add drag event listner")
+			dropRef.current.addEventListener("dragenter",handleDragEnter)
+			dropRef.current.addEventListener("dragleave",handleDragLeave)
+			dropRef.current.addEventListener("dragover",handleDragOver)
+			dropRef.current.addEventListener("drop",handleDrop)
+
+			return ()=>{
+				if (dropRef.current){
+					console.debug("Remove drag event listner")
+					dropRef.current.removeEventListener("dragenter",handleDragEnter)
+					dropRef.current.removeEventListener("dragleave",handleDragLeave)
+					dropRef.current.removeEventListener("dragover",handleDragOver)
+					dropRef.current.removeEventListener("drop",handleDrop)
+				}
+			}
+		}
+	},[])
+
+	return (
+		<div ref={dropRef} className={`${style.dragAndDrop} ${hover? style.active:""}`}>
+			{props.children}
+		</div>
+	)
+}
+
+export default DragAndDrop

src/components/FileBrowser.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { useState } from "react"
 import { useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
+import DragAndDrop from "./DragAndDrop"
 import FileBrowserElement from "./FileBrowserElement"
 import FileOpen from "./FileOpen"
 
@@ -16,8 +17,18 @@ const FileBrowser: React.FC = () => {
 		}
 	})
 
+	function handleDrop(files:FileList) {
+		for (let i = 0; i < files.length; i++) {
+			const file = files[i]
+			console.debug(file) // TODO
+		}
+	}
+
 	return (
 		<div>
+			<DragAndDrop
+				handleDrop={handleDrop}
+			>
 				<Breadcrum path={path} onDirClick={(newPath)=>{
 					setPath(newPath)
 				}}/>
@@ -56,6 +67,7 @@ const FileBrowser: React.FC = () => {
 				{<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
 					setShowFile(false)
 				}} />}
+			</DragAndDrop>
 		</div>
 	)
 }

src/index.tsx

@@ -9,6 +9,16 @@ const client = new ApolloClient({
 	cache: new InMemoryCache()
 })
 
+// Disable drag and drop behaviour on document
+function disable(event: DragEvent) {
+	event.preventDefault()
+	event.stopPropagation()
+}
+document.addEventListener("dragenter",disable)
+document.addEventListener("dragleave",disable)
+document.addEventListener("dragover",disable)
+document.addEventListener("drop",disable)
+
 ReactDOM.render(
 	<React.StrictMode>
 		<ApolloProvider client={client}>

src/style/DragAndDrop.module.scss

@@ -0,0 +1,21 @@
+.active{
+    border: dashed grey 4px;
+    background-color: rgba(255,255,255,.8);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+}
+
+.dragAndDrop{
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 2;
+}