chore: immediately insert file node and show progress inside super note when uploading a new file (#2876) [skip e2e]

packages/web/src/javascripts/Controllers/FilesController.ts

@@ -38,6 +38,7 @@ import {
   ProtectionsClientInterface,
   SNNote,
   SyncServiceInterface,
+  UuidGenerator,
   VaultServiceInterface,
 } from '@standardnotes/snjs'
 import { addToast, dismissToast, ToastType, updateToast } from '@standardnotes/toast'
@@ -52,14 +53,22 @@ const NonMutatingFileActions = [FileItemActionType.DownloadFile, FileItemActionT
 
 type FileContextMenuLocation = { x: number; y: number }
 
-export type FilesControllerEventData = {
-  [FilesControllerEvent.FileUploadedToNote]: {
-    uuid: string
-  }
+export enum FilesControllerEvent {
+  FileUploadedToNote = 'FileUploadedToNote',
+  FileUploadFinished = 'FileUploadFinished',
+  UploadAndInsertFile = 'UploadAndInsertFile',
 }
 
-export enum FilesControllerEvent {
-  FileUploadedToNote,
+export type FilesControllerEventData = {
+  [FilesControllerEvent.FileUploadedToNote]?: {
+    uuid: string
+  }
+  [FilesControllerEvent.FileUploadFinished]?: {
+    uploadedFile: FileItem
+  }
+  [FilesControllerEvent.UploadAndInsertFile]?: {
+    fileOrHandle: File | FileSystemFileHandle
+  }
 }
 
 export class FilesController extends AbstractViewController<FilesControllerEvent, FilesControllerEventData> {
@@ -73,6 +82,14 @@ export class FilesController extends AbstractViewController<FilesControllerEvent
   reader = this.shouldUseStreamingAPI ? StreamingFileReader : ClassicFileReader
   maxFileSize = this.reader.maximumFileSize()
 
+  uploadProgressMap: Map<
+    string,
+    {
+      file: File
+      progress: number
+    }
+  > = new Map()
+
   override deinit(): void {
     super.deinit()
     ;(this.notesController as unknown) = undefined
@@ -111,6 +128,8 @@ export class FilesController extends AbstractViewController<FilesControllerEvent
       setShowFileContextMenu: action,
       setShowProtectedOverlay: action,
       setFileContextMenuLocation: action,
+
+      uploadProgressMap: observable,
     })
 
     this.disposers.push(
@@ -453,9 +472,11 @@ export class FilesController extends AbstractViewController<FilesControllerEvent
     options: {
       showToast?: boolean
       note?: SNNote
+      onUploadStart?: (fileUuid: string) => void
+      onUploadFinish?: () => void
     } = {},
   ): Promise<FileItem | undefined> {
-    const { showToast = true, note } = options
+    const { showToast = true, note, onUploadStart, onUploadFinish } = options
 
     let toastId: string | undefined
     let canShowProgressNotification = false
@@ -482,6 +503,17 @@ export class FilesController extends AbstractViewController<FilesControllerEvent
         return
       }
 
+      const uuid = UuidGenerator.GenerateUuid()
+
+      this.uploadProgressMap.set(uuid, {
+        file: fileToUpload,
+        progress: 0,
+      })
+
+      if (onUploadStart) {
+        onUploadStart(uuid)
+      }
+
       const vaultForNote = note ? this.vaults.getItemVault(note) : undefined
 
       const operation = await this.files.beginNewFileUpload(
@@ -499,6 +531,11 @@ export class FilesController extends AbstractViewController<FilesControllerEvent
 
       const initialProgress = operation.getProgress().percentComplete
 
+      this.uploadProgressMap.set(uuid, {
+        file: fileToUpload,
+        progress: initialProgress,
+      })
+
       if (showToast) {
         if (this.mobileDevice && canShowProgressNotification) {
           toastId = await this.mobileDevice.displayNotification({
@@ -521,6 +558,10 @@ export class FilesController extends AbstractViewController<FilesControllerEvent
         await this.files.pushBytesForUpload(operation, data, index, isLast)
 
         const percentComplete = Math.round(operation.getProgress().percentComplete)
+        this.uploadProgressMap.set(uuid, {
+          file: fileToUpload,
+          progress: percentComplete,
+        })
         if (toastId) {
           if (this.mobileDevice && canShowProgressNotification) {
             await this.mobileDevice.displayNotification({
@@ -547,7 +588,7 @@ export class FilesController extends AbstractViewController<FilesControllerEvent
         fileResult.mimeType = await this.archiveService.getMimeType(ext)
       }
 
-      const uploadedFile = await this.files.finishUpload(operation, fileResult)
+      const uploadedFile = await this.files.finishUpload(operation, fileResult, uuid)
 
       if (uploadedFile instanceof ClientDisplayableError) {
         addToast({
@@ -557,6 +598,14 @@ export class FilesController extends AbstractViewController<FilesControllerEvent
         throw new Error(uploadedFile.text)
       }
 
+      if (onUploadFinish) {
+        onUploadFinish()
+      }
+
+      this.notifyEvent(FilesControllerEvent.FileUploadFinished, {
+        [FilesControllerEvent.FileUploadFinished]: { uploadedFile },
+      })
+
       if (toastId) {
         if (this.mobileDevice && canShowProgressNotification) {
           this.mobileDevice.cancelNotification(toastId).catch(console.error)
@@ -635,6 +684,12 @@ export class FilesController extends AbstractViewController<FilesControllerEvent
     })
   }
 
+  uploadAndInsertFileToCurrentNote(fileOrHandle: File | FileSystemFileHandle) {
+    this.notifyEvent(FilesControllerEvent.UploadAndInsertFile, {
+      [FilesControllerEvent.UploadAndInsertFile]: { fileOrHandle },
+    })
+  }
+
   deleteFilesPermanently = async (files: FileItem[]) => {
     const title = Strings.trashItemsTitle
     const text = files.length === 1 ? StringUtils.deleteFile(files[0].name) : Strings.deleteMultipleFiles