From 4d85a419ccf22202da48b66b8f9f93d0f64462cf Mon Sep 17 00:00:00 2001
From: Niklas <niklas@kapelle.org>
Date: Sun, 15 Aug 2021 17:27:06 +0200
Subject: [PATCH] added upload button

---
 src/components/FileBrowser.tsx      |  4 ++++
 src/components/FileUploadButton.tsx | 26 ++++++++++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/components/FileUploadButton.tsx

diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx
index d1e450c..dcb4534 100644
--- a/src/components/FileBrowser.tsx
+++ b/src/components/FileBrowser.tsx
@@ -8,6 +8,7 @@ import DragAndDrop from "./DragAndDrop"
 import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
 import FileBrowserElement from "./FileBrowserElement"
 import FileOpen from "./FileOpen"
+import FileUploadButton from "./FileUploadButton"
 
 const FileBrowser: React.FC = () => {
 	const [path,setPath] = useState("/")
@@ -80,6 +81,9 @@ const FileBrowser: React.FC = () => {
 					await handleDrop(files)
 				}}
 			>
+				<FileUploadButton 
+					onUpload={(files)=>handleDrop(files)}
+				/>
 				<Breadcrum path={path} onDirClick={(newPath)=>{
 					setPath(newPath)
 				}}/>
diff --git a/src/components/FileUploadButton.tsx b/src/components/FileUploadButton.tsx
new file mode 100644
index 0000000..3df15b7
--- /dev/null
+++ b/src/components/FileUploadButton.tsx
@@ -0,0 +1,26 @@
+import React from "react"
+import { useRef } from "react"
+
+interface Props {
+    onUpload?: (files: FileList)=>void
+}
+
+const FileUploadButton: React.FC<Props> = (props) => {
+
+	const inputRef = useRef<HTMLInputElement>(null)
+    
+	return ( 
+		<>
+			<button onClick={()=>inputRef.current?.click()} >
+                Upload files
+			</button>
+			<input type="file" multiple style={{display:"none"}} ref={inputRef} onInput={()=>{
+				if (inputRef.current && inputRef.current.files){
+					props.onUpload?.(inputRef.current.files)
+				}
+			}}/>
+		</>
+	)
+}
+
+export default FileUploadButton