aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

MyDropzone does work

Browse source
This commit is contained in:
aronmal 2022-11-09 21:44:19 +01:00
parent f3c3f15f3a
commit 572340d5bd
Signed by: aronmal
GPG key ID: 816B7707426FC612
4 changed files with 87 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

59
frontend/package-lock.json generated
View file

@ -24,6 +24,7 @@
"@types/web-bluetooth": "^0.0.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"sass": "^1.53.0",
@ -4327,6 +4328,14 @@
"node": ">= 4.5.0"
}
},
"node_modules/attr-accept": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
"integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
"engines": {
"node": ">=4"
}
},
"node_modules/autoprefixer": {
"version": "10.4.7",
"funding": [
@ -7090,6 +7099,17 @@
"webpack": "^4.0.0 || ^5.0.0"
}
},
"node_modules/file-selector": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
"integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
"dependencies": {
"tslib": "^2.4.0"
},
"engines": {
"node": ">= 12"
}
},
"node_modules/filelist": {
"version": "1.0.4",
"license": "Apache-2.0",
@ -12684,6 +12704,22 @@
"react": "^18.2.0"
}
},
"node_modules/react-dropzone": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
"integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
"dependencies": {
"attr-accept": "^2.2.2",
"file-selector": "^0.6.0",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">= 10.13"
},
"peerDependencies": {
"react": ">= 16.8 || 18.0.0"
}
},
"node_modules/react-error-overlay": {
"version": "6.0.11",
"license": "MIT"
@ -17835,6 +17871,11 @@
"atob": {
"version": "2.1.2"
},
"attr-accept": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
"integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
},
"autoprefixer": {
"version": "10.4.7",
"requires": {
@ -19507,6 +19548,14 @@
"schema-utils": "^3.0.0"
}
},
"file-selector": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
"integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
"requires": {
"tslib": "^2.4.0"
}
},
"filelist": {
"version": "1.0.4",
"requires": {
@ -22693,6 +22742,16 @@
"scheduler": "^0.23.0"
}
},
"react-dropzone": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
"integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
"requires": {
"attr-accept": "^2.2.2",
"file-selector": "^0.6.0",
"prop-types": "^15.8.1"
}
},
"react-error-overlay": {
"version": "6.0.11"
},

1
frontend/package.json
View file

@ -19,6 +19,7 @@
"@types/web-bluetooth": "^0.0.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"sass": "^1.53.0",

6
frontend/src/App.tsx
View file

@ -2,7 +2,8 @@
// import Homepage from './components/Homepage';
// import Homepage2 from './components/Homepage2';
// import SocketIO from './components/SocketIO';
import Upload from './components/Upload';
// import Upload from './components/Upload';
import MyDropzone from './components/MyDropzone';
import './styles/App.scss';
function App() {
@ -15,7 +16,8 @@ function App() {
{/* <Homepage/> */}
{/* <Homepage2/> */}
{/* <SocketIO/> */}
<Upload />
{/* <Upload /> */}
<MyDropzone />
</header>
</div>
);

23
frontend/src/components/MyDropzone.tsx Normal file
View file

@ -0,0 +1,23 @@
import {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'
function MyDropzone() {
const onDrop = useCallback((acceptedFiles: any) => {
// Do something with the files
console.log(acceptedFiles)
}, [])
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
{
isDragActive ?
<p>Drop the files here ...</p> :
<p>Drag 'n' drop some files here, or click to select files</p>
}
</div>
)
}
export default MyDropzone