Report file load error via toast (#3226)

Co-authored-by: github-actions <github-actions@github.com>

src/locales/en/main.json

@@ -990,5 +990,9 @@
     "exportingModel": "Exporting model...",
     "uploadTexture": "Upload Texture",
     "applyingTexture": "Applying Texture..."
+  },
+  "toastMessages": {
+    "fileLoadError": "Unable to find workflow in {fileName}",
+    "dropFileError": "Unable to process dropped item: {error}"
   }
 }

src/locales/fr/main.json

@@ -975,6 +975,10 @@
     },
     "title": "Commencez avec un modèle"
   },
+  "toastMessages": {
+    "dropFileError": "Impossible de traiter l'élément déposé : {error}",
+    "fileLoadError": "Impossible de trouver le flux de travail dans {fileName}"
+  },
   "userSelect": {
     "enterUsername": "Entrez un nom d'utilisateur",
     "existingUser": "Utilisateur existant",

src/locales/ja/main.json

@@ -975,6 +975,10 @@
     },
     "title": "テンプレートを利用して開始"
   },
+  "toastMessages": {
+    "dropFileError": "ドロップされたアイテムを処理できません: {error}",
+    "fileLoadError": "{fileName}でワークフローが見つかりません"
+  },
   "userSelect": {
     "enterUsername": "ユーザー名を入力してください",
     "existingUser": "既存のユーザー",

src/locales/ko/main.json

@@ -975,6 +975,10 @@
     },
     "title": "템플릿으로 시작하기"
   },
+  "toastMessages": {
+    "dropFileError": "드롭된 항목을 처리할 수 없습니다: {error}",
+    "fileLoadError": "{fileName}에서 워크플로우를 찾을 수 없습니다"
+  },
   "userSelect": {
     "enterUsername": "사용자 이름 입력",
     "existingUser": "기존 사용자",

src/locales/ru/main.json

@@ -975,6 +975,10 @@
     },
     "title": "Начните с шаблона"
   },
+  "toastMessages": {
+    "dropFileError": "Не удалось обработать перетаскиваемый элемент: {error}",
+    "fileLoadError": "Не удалось найти рабочий процесс в {fileName}"
+  },
   "userSelect": {
     "enterUsername": "Введите имя пользователя",
     "existingUser": "Существующий пользователь",

src/locales/zh/main.json

@@ -975,6 +975,10 @@
     },
     "title": "从模板开始"
   },
+  "toastMessages": {
+    "dropFileError": "无法处理掉落的项目：{error}",
+    "fileLoadError": "无法在 {fileName} 中找到工作流"
+  },
   "userSelect": {
     "enterUsername": "输入用户名",
     "existingUser": "用户已存在",

src/scripts/app.ts

@@ -450,32 +450,31 @@ export class ComfyApp {
           return
         }
         // Dragging from Chrome->Firefox there is a file but its a bmp, so ignore that
+        if (!event.dataTransfer) return
         if (
-          // @ts-expect-error fixme ts strict error
           event.dataTransfer.files.length &&
-          // @ts-expect-error fixme ts strict error
           event.dataTransfer.files[0].type !== 'image/bmp'
         ) {
-          // @ts-expect-error fixme ts strict error
           await this.handleFile(event.dataTransfer.files[0])
         } else {
           // Try loading the first URI in the transfer list
           const validTypes = ['text/uri-list', 'text/x-moz-url']
-          // @ts-expect-error fixme ts strict error
           const match = [...event.dataTransfer.types].find((t) =>
             validTypes.find((v) => t === v)
           )
           if (match) {
-            // @ts-expect-error fixme ts strict error
             const uri = event.dataTransfer.getData(match)?.split('\n')?.[0]
             if (uri) {
-              await this.handleFile(await (await fetch(uri)).blob())
+              await this.handleFile(
+                new File([await (await fetch(uri)).blob()], uri)
+              )
             }
           }
         }
       } catch (err: any) {
-        console.error('Unable to process dropped item:', err)
-        useToastStore().addAlert(`Unable to process dropped item: ${err}`)
+        useToastStore().addAlert(
+          t('toastMessages.dropFileError', { error: err })
+        )
       }
     })
 
@@ -1272,8 +1271,7 @@ export class ComfyApp {
 
     // Only have one action process the items so each one gets a unique seed correctly
     if (this.#processingQueue) {
-      // @ts-expect-error fixme ts strict error
-      return
+      return false
     }
 
     this.#processingQueue = true
@@ -1339,10 +1337,8 @@ export class ComfyApp {
   }
 
   showErrorOnFileLoad(file: File) {
-    this.ui.dialog.show(
-      $el('div', [
-        $el('p', { textContent: `Unable to find workflow in ${file.name}` })
-      ]).outerHTML
+    useToastStore().addAlert(
+      t('toastMessages.fileLoadError', { fileName: file.name })
     )
   }
 
@@ -1350,10 +1346,8 @@ export class ComfyApp {
    * Loads workflow data from the specified file
    * @param {File} file
    */
-  // @ts-expect-error fixme ts strict error
-  async handleFile(file) {
-    // @ts-expect-error fixme ts strict error
-    const removeExt = (f) => {
+  async handleFile(file: File) {
+    const removeExt = (f: string) => {
       if (!f) return f
       const p = f.lastIndexOf('.')
       if (p === -1) return f