diff --git a/digital-course-file/package-lock.json b/digital-course-file/package-lock.json
index 926d82a87abd301cd42ae23198bab3ec948aa47f..3733eefb2da293859f3d202f309313f4ebd85081 100644
--- a/digital-course-file/package-lock.json
+++ b/digital-course-file/package-lock.json
@@ -28,6 +28,7 @@
"react-github-login-button": "^1.0.1",
"react-google-button": "^0.7.2",
"react-icons": "^4.2.0",
+ "react-id-generator": "^3.0.1",
"react-loader-spinner": "^4.0.0",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
@@ -15741,6 +15742,14 @@
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
"integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ=="
},
+ "node_modules/react-id-generator": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/react-id-generator/-/react-id-generator-3.0.1.tgz",
+ "integrity": "sha512-YxorMaYxB8ItXA3Cuadcl/8ZaquU9Tzrrr5ogFL8tNqevF96cmCtx3LZLXYqBEj3BxoV9aBIK5yJjIuX/XHQ1A==",
+ "peerDependencies": {
+ "react": ">= 16.8.0"
+ }
+ },
"node_modules/react-is": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
@@ -34276,6 +34285,12 @@
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
"integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ=="
},
+ "react-id-generator": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/react-id-generator/-/react-id-generator-3.0.1.tgz",
+ "integrity": "sha512-YxorMaYxB8ItXA3Cuadcl/8ZaquU9Tzrrr5ogFL8tNqevF96cmCtx3LZLXYqBEj3BxoV9aBIK5yJjIuX/XHQ1A==",
+ "requires": {}
+ },
"react-is": {
"version": "17.0.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
diff --git a/digital-course-file/package.json b/digital-course-file/package.json
index 9c11193cd1ad92cc70080279ab4fd9489bf5f70e..987d348d91c1bc6e31fbf36f63e23b2013b04e77 100644
--- a/digital-course-file/package.json
+++ b/digital-course-file/package.json
@@ -24,6 +24,7 @@
"react-github-login-button": "^1.0.1",
"react-google-button": "^0.7.2",
"react-icons": "^4.2.0",
+ "react-id-generator": "^3.0.1",
"react-loader-spinner": "^4.0.0",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
diff --git a/digital-course-file/src/user/AddFile.js b/digital-course-file/src/user/AddFile.js
index 6e52a91f61628160c31a9fada31a99cd4d1b0432..48a0c0d7a0864083ab3f1839093c14ae8f30294e 100644
--- a/digital-course-file/src/user/AddFile.js
+++ b/digital-course-file/src/user/AddFile.js
@@ -1,41 +1,37 @@
-import React, { useState } from "react"
-import ReactDOM from "react-dom"
-import { faFileUpload } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import React, { useState } from 'react'
+import ReactDOM from 'react-dom'
+import { faFileUpload } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { storage, database } from '../fire.js'
-import { ROOT_FOLDER } from "../hooks/useFolder"
-import { v4 as uuidV4 } from "uuid"
-import { ProgressBar, Toast } from "react-bootstrap"
+import { ROOT_FOLDER } from '../hooks/useFolder'
+import { v4 as uuidV4 } from 'uuid'
+import { ProgressBar, Toast } from 'react-bootstrap'
import firebase from 'firebase'
export default function AddFile({ currentFolder }) {
const [uploadingFiles, setUploadingFiles] = useState([])
-
function handleUpload(e) {
const file = e.target.files[0]
if (currentFolder == null || file == null) return
const id = uuidV4()
- setUploadingFiles(prevUploadingFiles => [
+ setUploadingFiles((prevUploadingFiles) => [
...prevUploadingFiles,
{ id: id, name: file.name, progress: 0, error: false },
])
- const filePath =
- currentFolder === ROOT_FOLDER
- ? `${currentFolder.path.join("/")}/${file.name}`
- : `${currentFolder.path.join("/")}/${currentFolder.name}/${file.name}`
+ const uniqueid = uuidV4()
const uploadTask = storage
- .ref(`/files/${firebase.auth().currentUser.uid}/${filePath}`)
+ .ref(`/files/${firebase.auth().currentUser.uid}/${uniqueid}`)
.put(file)
uploadTask.on(
- "state_changed",
- snapshot => {
+ 'state_changed',
+ (snapshot) => {
const progress = snapshot.bytesTransferred / snapshot.totalBytes
- setUploadingFiles(prevUploadingFiles => {
- return prevUploadingFiles.map(uploadFile => {
+ setUploadingFiles((prevUploadingFiles) => {
+ return prevUploadingFiles.map((uploadFile) => {
if (uploadFile.id === id) {
return { ...uploadFile, progress: progress }
}
@@ -45,8 +41,8 @@ export default function AddFile({ currentFolder }) {
})
},
() => {
- setUploadingFiles(prevUploadingFiles => {
- return prevUploadingFiles.map(uploadFile => {
+ setUploadingFiles((prevUploadingFiles) => {
+ return prevUploadingFiles.map((uploadFile) => {
if (uploadFile.id === id) {
return { ...uploadFile, error: true }
}
@@ -55,19 +51,19 @@ export default function AddFile({ currentFolder }) {
})
},
() => {
- setUploadingFiles(prevUploadingFiles => {
- return prevUploadingFiles.filter(uploadFile => {
+ setUploadingFiles((prevUploadingFiles) => {
+ return prevUploadingFiles.filter((uploadFile) => {
return uploadFile.id !== id
})
})
- uploadTask.snapshot.ref.getDownloadURL().then(url => {
+ uploadTask.snapshot.ref.getDownloadURL().then((url) => {
database.files
- .where("name", "==", file.name)
- .where("userId", "==", firebase.auth().currentUser.uid)
- .where("folderId", "==", currentFolder.id)
+ .where('name', '==', file.name)
+ .where('userId', '==', firebase.auth().currentUser.uid)
+ .where('folderId', '==', currentFolder.id)
.get()
- .then(existingFiles => {
+ .then((existingFiles) => {
const existingFile = existingFiles.docs[0]
if (existingFile) {
existingFile.ref.update({ url: url })
@@ -75,6 +71,7 @@ export default function AddFile({ currentFolder }) {
database.files.add({
url: url,
name: file.name,
+ uniqueid: uniqueid,
createdAt: database.getTime(),
folderId: currentFolder.id,
userId: firebase.auth().currentUser.uid,
@@ -88,31 +85,31 @@ export default function AddFile({ currentFolder }) {
return (
<>
- <label className="btn btn-outline-success btn-sm m-0 mr-2">
+ <label className='btn btn-outline-success btn-sm m-0 mr-2'>
<FontAwesomeIcon icon={faFileUpload} />
<input
- name="upload"
- type="file"
+ name='upload'
+ type='file'
onChange={handleUpload}
- style={{ opacity: 0, position: "absolute", left: "-9999px" }}
+ style={{ opacity: 0, position: 'absolute', left: '-9999px' }}
/>
</label>
{uploadingFiles.length > 0 &&
ReactDOM.createPortal(
<div
style={{
- position: "absolute",
- bottom: "4rem",
- right: "2rem",
- maxWidth: "250px",
+ position: 'absolute',
+ bottom: '4rem',
+ right: '2rem',
+ maxWidth: '250px',
}}
>
- {uploadingFiles.map(file => (
+ {uploadingFiles.map((file) => (
<Toast
key={file.id}
onClose={() => {
- setUploadingFiles(prevUploadingFiles => {
- return prevUploadingFiles.filter(uploadFile => {
+ setUploadingFiles((prevUploadingFiles) => {
+ return prevUploadingFiles.filter((uploadFile) => {
return uploadFile.id !== file.id
})
})
@@ -120,18 +117,18 @@ export default function AddFile({ currentFolder }) {
>
<Toast.Header
closeButton={file.error}
- className="text-truncate w-100 d-block"
+ className='text-truncate w-100 d-block'
>
{file.name}
</Toast.Header>
<Toast.Body>
<ProgressBar
animated={!file.error}
- variant={file.error ? "danger" : "primary"}
+ variant={file.error ? 'danger' : 'primary'}
now={file.error ? 100 : file.progress * 100}
label={
file.error
- ? "Error"
+ ? 'Error'
: `${Math.round(file.progress * 100)}%`
}
/>
@@ -143,4 +140,4 @@ export default function AddFile({ currentFolder }) {
)}
</>
)
-}
\ No newline at end of file
+}
diff --git a/digital-course-file/src/user/Dropzone.js b/digital-course-file/src/user/Dropzone.js
index 1e42498dbb3d7e7aca8f634c652fc5dee7c25574..4e32cf835d2ec9ee7220df41a0bd566b41707716 100644
--- a/digital-course-file/src/user/Dropzone.js
+++ b/digital-course-file/src/user/Dropzone.js
@@ -51,13 +51,10 @@ export default function Dropzone({ currentFolder }) {
...prevUploadingFiles,
{ id: id, name: file.name, progress: 0, error: false },
])
- const filePath =
- currentFolder === ROOT_FOLDER
- ? `${currentFolder.path.join('/')}/${file.name}`
- : `${currentFolder.path.join('/')}/${currentFolder.name}/${file.name}`
+ const uniqueid = uuidV4()
const uploadTask = storage
- .ref(`/files/${firebase.auth().currentUser.uid}/${filePath}`)
+ .ref(`/files/${firebase.auth().currentUser.uid}/${uniqueid}`)
.put(file)
uploadTask.on(
@@ -105,6 +102,7 @@ export default function Dropzone({ currentFolder }) {
database.files.add({
url: url,
name: file.name,
+ uniqueid:uniqueid,
createdAt: database.getTime(),
folderId: currentFolder.id,
userId: firebase.auth().currentUser.uid,