Reading filedropper

frontend/package-lock.json

@@ -22,6 +22,7 @@
         "@types/react-router-dom": "^5.3.3",
         "@types/sass": "^1.43.1",
         "@types/web-bluetooth": "^0.0.15",
+        "classnames": "^2.3.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
@@ -4970,6 +4971,11 @@
       "version": "1.2.2",
       "license": "MIT"
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.0",
       "license": "MIT",
@@ -18264,6 +18270,11 @@
     "cjs-module-lexer": {
       "version": "1.2.2"
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "5.3.0",
       "requires": {

frontend/package.json

@@ -17,6 +17,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/sass": "^1.43.1",
     "@types/web-bluetooth": "^0.0.15",
+    "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",

frontend/src/components/MyDropzone.tsx

@@ -1,21 +1,26 @@
-import {useCallback} from 'react'
+import classNames from 'classnames'
+import {useCallback, useState} from 'react'
 import {useDropzone} from 'react-dropzone'
+import { readFile } from '../helpers'
 
 function MyDropzone() {
-  const onDrop = useCallback((acceptedFiles: any) => {
+  const [txt, settxt] = useState('Empty!')
+  const onDrop = useCallback(async (acceptedFiles: any) => {
     // Do something with the files
     console.log(acceptedFiles)
+    settxt(await readFile(acceptedFiles[0]))
   }, [])
   const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
 
   return (
-    <div {...getRootProps()}>
+    <div {...getRootProps()} className={classNames('filedropper', isDragActive ? 'dragging' : 'standby')}>
       <input {...getInputProps()} />
       {
         isDragActive ?
           <p>Drop the files here ...</p> :
           <p>Drag 'n' drop some files here, or click to select files</p>
       }
+      {txt}
     </div>
   )
 }

frontend/src/helpers.ts

@@ -51,3 +51,17 @@ export const initlialTargetPreview = {
     y: 0
 };
 export const isHit = (hits: HitType[], x: number, y: number) => hits.filter(h => h.x === x && h.y === y);
+export function readFile(file: File): Promise<string> {
+    return new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.onload = async (e) => {
+            if (!e.target)
+                return
+            const text = (e.target.result)
+            if (typeof text !== 'string')
+                return
+            resolve(text)
+        };
+        reader.readAsText(file)
+    })
+}

frontend/src/styles/App.scss

@@ -194,3 +194,21 @@
     background-color: red;
   }
 }
+
+.filedropper {
+  @include transition(.2s);
+  transition-property: background-color;
+  background-color: transparent;
+  border: .25em dashed #fff2;
+  border-radius: 1em;
+  width: 40vw;
+  min-height: 10vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  &.dragging {
+    background-color: #fff1;
+    border: .25em dashed #00f8;
+  }
+}