beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improved Progress bar UI

Browse source
This commit is contained in:
Abhinav-grd 2021-01-12 12:29:37 +05:30
parent 52295b0548
commit 1b32791fb4
5 changed files with 61 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/pages/gallery/components/CollectionDropZone.tsx
View file

@ -34,17 +34,18 @@ const CollectionDropZone = ({
setData,
collectionLatestFile,
noDragEventsBubbling,
showProgress,
setProgressView,
token,
encryptionKey,
setPercentComplete
progressBarProps
}) => {
const upload = async (acceptedFiles) => {
closeModal();
showProgress();
await UploadService.uploadFiles(acceptedFiles, collectionLatestFile, token, setPercentComplete);
setProgressView(true);
await UploadService.uploadFiles(acceptedFiles, collectionLatestFile, token, progressBarProps);
setProgressView(false);
setData(await fetchData(token, encryptionKey, [collectionLatestFile.collection]));
}
return (

8
src/pages/gallery/components/CollectionSelector.tsx
View file

@ -9,9 +9,9 @@ function CollectionSelector({
uploadModalView,
closeUploadModal,
collectionLatestFile,
showProgress,
setProgressView,
setData,
setPercentComplete,
progressBarProps,
}) {
const [token, setToken] = useState(null);
@ -27,11 +27,11 @@ function CollectionSelector({
closeModal={closeUploadModal}
collectionLatestFile={item}
noDragEventsBubbling
showProgress={showProgress}
setProgressView={setProgressView}
token={token}
encryptionKey={encryptionKey}
setData={setData}
setPercentComplete={setPercentComplete}
progressBarProps={progressBarProps}
>
<Card style={{ cursor: 'pointer', border: 'solid', width: "95%", marginBottom: "5px", padding: "auto" }}>
<PreviewCard data={item.file} updateUrl={() => { }} onClick={() => { }} />

12
src/pages/gallery/components/Upload.tsx
View file

@ -1,13 +1,17 @@
import React, { useState } from "react"
import { UPLOAD_STAGES } from "services/uploadService";
import CollectionSelector from "./CollectionSelector"
import UploadProgress from "./UploadProgress"
export default function Upload({ uploadModalView, closeUploadModal, collectionLatestFile, setData }) {
const [progressView, setProgressView] = useState(false);
const [uploadStage, setUploadStage] = useState<UPLOAD_STAGES>(UPLOAD_STAGES.START);
const [fileCounter, setFileCounter] = useState({ current: 0, total: 0 });
const [percentComplete, setPercentComplete] = useState(0);
const init = () => {
setProgressView(false);
setUploadStage(UPLOAD_STAGES.START);
setFileCounter({ current: 0, total: 0 });
setPercentComplete(0);
}
return (<>
@ -15,12 +19,14 @@ export default function Upload({ uploadModalView, closeUploadModal, collectionLa
uploadModalView={uploadModalView}
closeUploadModal={closeUploadModal}
collectionLatestFile={collectionLatestFile}
showProgress={() => setProgressView(true)}
setProgressView={ setProgressView}
setData={setData}
setPercentComplete={setPercentComplete}
progressBarProps={{ setPercentComplete, setFileCounter, setUploadStage }}
/>
<UploadProgress
now={percentComplete}
fileCounter={fileCounter}
uploadStage={uploadStage}
show={progressView}
onHide={init}
/>

8
src/pages/gallery/components/UploadProgress.tsx
View file

@ -19,12 +19,12 @@ export default function UploadProgress(props) {
{props.now == 100 ? (
<Alert variant='success'>Upload Completed</Alert>
) : (
<ProgressBar animated now={props.now} />
<>
<Alert variant='info'>{props.uploadStage} {props.fileCounter.current} of {props.fileCounter.total}</Alert>
<ProgressBar animated now={props.now} />
</>
)}
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Minimize</Button>
</Modal.Footer>
</Modal>
);
}

60
src/services/uploadService.ts
View file

@ -77,42 +77,60 @@ class Queue<T> {
}
}
export enum UPLOAD_STAGES {
START = "Preparing to upload",
ENCRYPTION = "Encryting your files",
UPLOAD = "Uploading your Files",
FINISH = "Files Uploaded Successfully !!!"
}
class UploadService {
private uploadURLs = new Queue<uploadURL>();
private uploadURLFetchInProgress: Promise<any> = null
private increment
private currentPercent
public async uploadFiles(recievedFiles: File[], collectionLatestFile: collectionLatestFile, token, setPercentComplete) {
private perStepProgress: number
private stepsCompleted: number
private totalFilesCount: number
public async uploadFiles(recievedFiles: File[], collectionLatestFile: collectionLatestFile, token: string, uploadProgressProps) {
try {
this.currentPercent = 0;
this.increment = 100 / (3 * recievedFiles.length);
const worker = await new CryptoWorker();
await Promise.all(recievedFiles.map(async (recievedFile: File) => {
this.stepsCompleted = 1;
this.totalFilesCount = recievedFiles.length;
this.perStepProgress = 100 / (2 * recievedFiles.length);
uploadProgressProps.setUploadStage(UPLOAD_STAGES.ENCRYPTION);
const encryptedFiles: encryptedFile[] = await Promise.all(recievedFiles.map(async (recievedFile: File, index) => {
const file = await this.formatData(recievedFile);
console.log(file);
const encryptedFile = await this.encryptFiles(worker, file, collectionLatestFile.collection.key);
const encryptedfile: encryptedFile = await this.encryptFiles(worker, file, collectionLatestFile.collection.key);
this.increasePercent(setPercentComplete)
const objectKeys = await this.uploadtoBucket(encryptedfile, token);
this.increasePercent(setPercentComplete)
const uploadedfile = await this.uploadFile(collectionLatestFile, encryptedfile, objectKeys, token);
this.increasePercent(setPercentComplete)
console.log(uploadedfile);
this.changeUploadProgressProps(uploadProgressProps);
return encryptedFile;
}));
setPercentComplete(100);
uploadProgressProps.setUploadStage(UPLOAD_STAGES.UPLOAD);
await Promise.all(encryptedFiles.map(async (encryptedFile: encryptedFile, index) => {
const objectKeys = await this.uploadtoBucket(encryptedFile, token);
await this.uploadFile(collectionLatestFile, encryptedFile, objectKeys, token);
this.changeUploadProgressProps(uploadProgressProps);
}));
uploadProgressProps.setUploadStage(UPLOAD_STAGES.FINISH);
uploadProgressProps.setPercentComplete(0);
}
catch (e) {
console.log(e);
}
}
private increasePercent(setPercentComplete) {
this.currentPercent += this.increment;
setPercentComplete(this.currentPercent);
private changeUploadProgressProps({ setPercentComplete, setFileCounter }) {
this.stepsCompleted++;
const fileCompleted = this.stepsCompleted % this.totalFilesCount;
setFileCounter({ current: fileCompleted, total: this.totalFilesCount });
setPercentComplete(this.perStepProgress * this.stepsCompleted);
}
private async formatData(recievedFile: File) {
const filedata: Uint8Array = await this.getUint8ArrayView(recievedFile);