add file uploading toast in file pin widget

pywebio · Mar 19, 2023 · 1e055bb · 1e055bb
1 parent 44839d0
commit 1e055bb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/webiojs/src/handlers/pin.ts b/webiojs/src/handlers/pin.ts
@@ -3,6 +3,7 @@ import {CommandHandler} from "./base";
 import {GetPinValue, PinChangeCallback, PinUpdate, WaitChange, IsFileInput} from "../models/pin";
 import {state} from "../state";
 import {serialize_file, serialize_json} from "../utils";
+import {t} from "../i18n";
 
 
 export class PinHandler implements CommandHandler {
@@ -58,12 +59,26 @@ export class PinHandler implements CommandHandler {
             // msg.data.value: {multiple: bool, files: File[]}
             let {multiple, files} = msg.data.value;
             msg.data.value = multiple ? [] : null; // replace file value with initial value
+
+            let toast = Toastify({
+                text: `⏳${t("file_uploading")} 0%`,
+                duration: -1,
+                gravity: "top",
+                position: 'center',
+                backgroundColor: '#1565c0',
+            });
+            if (files.length > 0) toast.showToast();
             state.CurrentSession.send_buffer(
                 new Blob([
                     serialize_json(msg),
                     ...files.map((file: File) => serialize_file(file, 'value'))
-                ], {type: 'application/octet-stream'})
+                ], {type: 'application/octet-stream'}),
+                (loaded: number, total: number) => {
+                    toast.toastElement.innerText = `⏳${t("file_uploading")} ${(loaded / total).toFixed(2)}%`;
+                    if (total - loaded < 100) toast.hideToast();
+                }
             );
+
         } else {
             state.CurrentSession.send_message(msg);
         }

diff --git a/webiojs/src/i18n.ts b/webiojs/src/i18n.ts
@@ -18,6 +18,7 @@ const translations: { [lang: string]: { [msgid: string]: string } } = {
         "duplicated_pin_name": "This pin widget has expired (due to the output of a new pin widget with the same name).",
         "browse_file": "Browse",
         "duplicated_scope_name": "Error: The name of this scope is duplicated with the previous one!",
+        "file_uploading": "File Uploading...",
     },
     "zh": {
         "disconnected_with_server": "与服务器连接已断开，请刷新页面重新操作",
@@ -31,6 +32,7 @@ const translations: { [lang: string]: { [msgid: string]: string } } = {
         "duplicated_pin_name": "该 Pin widget 已失效（由于输出了新的同名 pin widget）",
         "browse_file": "浏览文件",
         "duplicated_scope_name": "错误: 此scope与已有scope重复!",
+        "file_uploading": "文件上传中",
     },
     "ru": {
         "disconnected_with_server": "Соединение с сервером потеряно, пожалуйста перезагрузите страницу",
@@ -43,6 +45,7 @@ const translations: { [lang: string]: { [msgid: string]: string } } = {
         "cancel": "Отмена",
         "duplicated_pin_name": "Этот закреп виджет устарел (виджет с таким же именем был выведен).",
         "browse_file": "Обзор",
+
     },
     "de": {
         "disconnected_with_server": "Verbindung zum Server unterbrochen. Bitte laden Sie die Seite neu.",
@@ -94,7 +97,7 @@ function strfmt(fmt: string) {
     let args = arguments;
 
     return fmt
-    // put space after double % to prevent placeholder replacement of such matches
+        // put space after double % to prevent placeholder replacement of such matches
         .replace(/%%/g, '%% ')
         // replace placeholders
         .replace(/%(\d+)/g, function (str, p1) {
@@ -104,10 +107,10 @@ function strfmt(fmt: string) {
         .replace(/%% /g, '%')
 }
 
-export function t(msgid: string, ...args:string[]): string {
+export function t(msgid: string, ...args: string[]): string {
     let fmt = null;
     for (let lang of ['custom', userLangCode, langPrefix, 'en']) {
-        if (translations[lang] && translations[lang][msgid]){
+        if (translations[lang] && translations[lang][msgid]) {
             fmt = translations[lang][msgid];
             break;
         }