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

app/assets/javascripts/UIModels/AppState/FilesState.ts

@@ -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,
+        type: ToastType.Progress,
-        message: 'Downloading file...',
+        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)

package.json

@@ -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/snjs": "2.105.3",
-    "@standardnotes/stylekit": "5.24.1",
+    "@standardnotes/stylekit": "5.25.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",

yarn.lock

@@ -2483,10 +2483,10 @@
     "@standardnotes/common" "^1.19.6"
     "@standardnotes/utils" "^1.6.3"
 
-"@standardnotes/files@^1.0.4":
+"@standardnotes/files@^1.0.5":
-  version "1.0.4"
+  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.4.tgz#bd0a565498fffe6e079863907d233df64df0fc15"
+  resolved "https://registry.yarnpkg.com/@standardnotes/files/-/files-1.0.5.tgz#ed293082167555ca89ce1c2a879eb7307064db61"
-  integrity sha512-soj7zpb/UWOtx9Fc/cG5cq3fHh4m3+LmLUOje+Zh78f7eA9LkbPGGn7XajCINCBSAcHKlia5mhTu3NnwH9S3Ww==
+  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":
+"@standardnotes/snjs@2.105.3":
-  version "2.105.2"
+  version "2.105.3"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.105.2.tgz#fd2ac92c84010225f3f66dc143979f1360790476"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.105.3.tgz#4eebce30c8cc6469ba6aada28ceb9825b47827c5"
-  integrity sha512-ihRp4Z6XEakJwEg9UWJxMgda5LvN+k+EEGBVU2eG5CTjeBI3cQyu0K+iRpZD5jzg2/Vvis1gEdIrZPfPJj1mCQ==
+  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":
+"@standardnotes/stylekit@5.25.0":
-  version "5.24.1"
+  version "5.25.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.24.1.tgz#9ebc3afde31ce4263e83ef59392120aaa932d638"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.25.0.tgz#dd79f8c7bd9c2a6f810bc6283f76928dd268f9e8"
-  integrity sha512-niYMW8Mpj2gOloI2SSGoZvV8kSGGcujB09ti9uoicK1c9WD9s/vkjhoyzdSa3FmAjXbzVq/iwI9boSu7MLcpHw==
+  integrity sha512-zc/qsWJ6UYNFZeEPpifJbN19GXZy2VBrha2njvnmLy+Yr9XZuDBR+kwzBvvDYIb33OijkATNQ4EyUja245edKQ==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"