Skip to content
Snippets Groups Projects
Commit 940e6f20 authored by Nishita Dash's avatar Nishita Dash
Browse files

Upload New File

parent 1774d5fc
No related branches found
No related tags found
No related merge requests found
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 "C:/Users/Dell/Desktop/try/digital-course-file/digital-course-file/src/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 => [
...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 uploadTask = storage
.ref(`/files/${firebase.auth().currentUser.uid}/${filePath}`)
.put(file)
uploadTask.on(
"state_changed",
snapshot => {
const progress = snapshot.bytesTransferred / snapshot.totalBytes
setUploadingFiles(prevUploadingFiles => {
return prevUploadingFiles.map(uploadFile => {
if (uploadFile.id === id) {
return { ...uploadFile, progress: progress }
}
return uploadFile
})
})
},
() => {
setUploadingFiles(prevUploadingFiles => {
return prevUploadingFiles.map(uploadFile => {
if (uploadFile.id === id) {
return { ...uploadFile, error: true }
}
return uploadFile
})
})
},
() => {
setUploadingFiles(prevUploadingFiles => {
return prevUploadingFiles.filter(uploadFile => {
return uploadFile.id !== id
})
})
uploadTask.snapshot.ref.getDownloadURL().then(url => {
database.files
.where("name", "==", file.name)
.where("userId", "==", firebase.auth().currentUser.uid)
.where("folderId", "==", currentFolder.id)
.get()
.then(existingFiles => {
const existingFile = existingFiles.docs[0]
if (existingFile) {
existingFile.ref.update({ url: url })
} else {
database.files.add({
url: url,
name: file.name,
createdAt: database.getTime(),
folderId: currentFolder.id,
userId: firebase.auth().currentUser.uid,
})
}
})
})
}
)
}
return (
<>
<label className="btn btn-outline-success btn-sm m-0 mr-2">
<FontAwesomeIcon icon={faFileUpload} />
<input
type="file"
onChange={handleUpload}
style={{ opacity: 0, position: "absolute", left: "-9999px" }}
/>
</label>
{uploadingFiles.length > 0 &&
ReactDOM.createPortal(
<div
style={{
position: "absolute",
bottom: "1rem",
right: "1rem",
maxWidth: "250px",
}}
>
{uploadingFiles.map(file => (
<Toast
key={file.id}
onClose={() => {
setUploadingFiles(prevUploadingFiles => {
return prevUploadingFiles.filter(uploadFile => {
return uploadFile.id !== file.id
})
})
}}
>
<Toast.Header
closeButton={file.error}
className="text-truncate w-100 d-block"
>
{file.name}
</Toast.Header>
<Toast.Body>
<ProgressBar
animated={!file.error}
variant={file.error ? "danger" : "primary"}
now={file.error ? 100 : file.progress * 100}
label={
file.error
? "Error"
: `${Math.round(file.progress * 100)}%`
}
/>
</Toast.Body>
</Toast>
))}
</div>,
document.body
)}
</>
)
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment