Skip to content
Snippets Groups Projects
Commit 2f035b18 authored by Ganapathi Subramanyam  Jayam's avatar Ganapathi Subramanyam Jayam :dart:
Browse files

great work commited

parent 1a662336
No related branches found
No related tags found
No related merge requests found
......@@ -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",
......@@ -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",
......
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)}%`
}
/>
......
......@@ -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,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment