feat: show download/upload progess in toast (#1008)

This commit is contained in:
Aman Harwara
2022-05-03 18:28:45 +05:30
committed by GitHub
parent a15a40f6c4
commit e4fbb2515e
3 changed files with 46 additions and 24 deletions

View File

@@ -8,7 +8,7 @@ import {
parseFileName,
} from '@standardnotes/filepicker'
import { ClientDisplayableError, SNFile } from '@standardnotes/snjs'
import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
import { addToast, dismissToast, ToastType, updateToast } from '@standardnotes/stylekit'
import { WebApplication } from '../Application'
export class FilesState {
@@ -27,18 +27,30 @@ export class FilesState {
}
downloadingToastId = addToast({
type: ToastType.Loading,
message: 'Downloading file...',
type: ToastType.Progress,
message: `Downloading file "${file.name}" (0%)`,
progress: 0,
})
const decryptedBytesArray: Uint8Array[] = []
await this.application.files.downloadFile(file, async (decryptedBytes: Uint8Array) => {
await this.application.files.downloadFile(file, async (decryptedBytes, progress) => {
if (isUsingStreamingSaver) {
await saver.pushBytes(decryptedBytes)
} else {
decryptedBytesArray.push(decryptedBytes)
}
if (progress) {
const progressPercent = Number.isInteger(progress.percentComplete)
? progress.percentComplete
: progress.percentComplete.toFixed(2)
updateToast(downloadingToastId, {
message: `Downloading file "${file.name}" (${progressPercent}%)`,
progress: progress.percentComplete,
})
}
})
if (isUsingStreamingSaver) {
@@ -103,11 +115,6 @@ export class FilesState {
continue
}
toastId = addToast({
type: ToastType.Loading,
message: `Uploading file "${file.name}"...`,
})
const operation = await this.application.files.beginNewFileUpload(file.size)
if (operation instanceof ClientDisplayableError) {
@@ -118,8 +125,23 @@ export class FilesState {
throw new Error('Unable to start upload session')
}
const initialProgress = operation.getProgress().percentComplete
toastId = addToast({
type: ToastType.Progress,
message: `Uploading file "${file.name}" (${initialProgress}%)`,
progress: initialProgress,
})
const onChunk = async (chunk: Uint8Array, index: number, isLast: boolean) => {
await this.application.files.pushBytesForUpload(operation, chunk, index, isLast)
const progress = operation.getProgress().percentComplete
const formattedProgress = Number.isInteger(progress) ? progress : progress.toFixed(2)
updateToast(toastId, {
message: `Uploading file "${file.name}" (${formattedProgress}%)`,
progress,
})
}
const fileResult = await picker.readFile(file, minimumChunkSize, onChunk)

View File

@@ -72,8 +72,8 @@
"@standardnotes/components": "1.7.15",
"@standardnotes/filepicker": "1.13.4",
"@standardnotes/sncrypto-web": "1.9.0",
"@standardnotes/snjs": "2.105.2",
"@standardnotes/stylekit": "5.24.1",
"@standardnotes/snjs": "2.105.3",
"@standardnotes/stylekit": "5.25.0",
"@zip.js/zip.js": "^2.4.10",
"mobx": "^6.5.0",
"mobx-react-lite": "^3.3.0",

View File

@@ -2483,10 +2483,10 @@
"@standardnotes/common" "^1.19.6"
"@standardnotes/utils" "^1.6.3"
"@standardnotes/files@^1.0.4":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.4.tgz#bd0a565498fffe6e079863907d233df64df0fc15"
integrity sha512-soj7zpb/UWOtx9Fc/cG5cq3fHh4m3+LmLUOje+Zh78f7eA9LkbPGGn7XajCINCBSAcHKlia5mhTu3NnwH9S3Ww==
"@standardnotes/files@^1.0.5":
version "1.0.5"
resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.5.tgz#ed293082167555ca89ce1c2a879eb7307064db61"
integrity sha512-ACsl9emP7S9OpCC8FcGZZxdxGJjMjZ3wvshevsjHqGtKcKQX/2/xU8FcUNg05VzvGMicV8Smekp+/6BvcNpjEA==
dependencies:
"@standardnotes/models" "^1.6.2"
"@standardnotes/responses" "^1.6.13"
@@ -2541,10 +2541,10 @@
buffer "^6.0.3"
libsodium-wrappers "^0.7.9"
"@standardnotes/snjs@2.105.2":
version "2.105.2"
resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.105.2.tgz#fd2ac92c84010225f3f66dc143979f1360790476"
integrity sha512-ihRp4Z6XEakJwEg9UWJxMgda5LvN+k+EEGBVU2eG5CTjeBI3cQyu0K+iRpZD5jzg2/Vvis1gEdIrZPfPJj1mCQ==
"@standardnotes/snjs@2.105.3":
version "2.105.3"
resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.105.3.tgz#4eebce30c8cc6469ba6aada28ceb9825b47827c5"
integrity sha512-dYzGCbljJ6x88+kJX2iMS+8hyKGSvLljJqlmeWYVnoVPs9ZR2CkfZfjugaVkNIMS9mteuAO36t0YUyhQA6yBPQ==
dependencies:
"@standardnotes/auth" "^3.18.11"
"@standardnotes/common" "^1.19.6"
@@ -2552,7 +2552,7 @@
"@standardnotes/encryption" "^1.6.1"
"@standardnotes/features" "^1.39.0"
"@standardnotes/filepicker" "^1.13.4"
"@standardnotes/files" "^1.0.4"
"@standardnotes/files" "^1.0.5"
"@standardnotes/models" "^1.6.2"
"@standardnotes/responses" "^1.6.13"
"@standardnotes/services" "^1.10.1"
@@ -2560,10 +2560,10 @@
"@standardnotes/sncrypto-common" "^1.8.0"
"@standardnotes/utils" "^1.6.3"
"@standardnotes/stylekit@5.24.1":
version "5.24.1"
resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.24.1.tgz#9ebc3afde31ce4263e83ef59392120aaa932d638"
integrity sha512-niYMW8Mpj2gOloI2SSGoZvV8kSGGcujB09ti9uoicK1c9WD9s/vkjhoyzdSa3FmAjXbzVq/iwI9boSu7MLcpHw==
"@standardnotes/stylekit@5.25.0":
version "5.25.0"
resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.25.0.tgz#dd79f8c7bd9c2a6f810bc6283f76928dd268f9e8"
integrity sha512-zc/qsWJ6UYNFZeEPpifJbN19GXZy2VBrha2njvnmLy+Yr9XZuDBR+kwzBvvDYIb33OijkATNQ4EyUja245edKQ==
dependencies:
"@nanostores/preact" "^0.1.3"
"@reach/listbox" "^0.16.2"