文件选择对话框添加后缀名过滤

package.json

@@ -18,7 +18,7 @@
     "core-js": "^3.21.0",
     "element-resize-detector": "^1.2.4",
     "qrcode.vue": "^3.3.3",
-    "quasar": "^2.7.1",
+    "quasar": "^2.7.3",
     "reconnecting-websocket": "^4.4.0",
     "sortablejs": "^1.15.0",
     "to": "^0.2.9",

src/components/FileManageDialog.vue

@@ -296,14 +296,16 @@
           <q-uploader
             ref="uploader"
             style="height: 69vh; width: 70%"
+            :disable="uploader_loading"
             :url="getUrl"
             method="post"
             :headers="generatorFileUploadHeaders"
             :label="$t('select file') + ':'"
-            accept="*"
+            :accept="uploader_accept"
             @start="onStartUpload"
             @uploaded="onUploaded"
             @failed="onFailed"
+            @added="/*onFileAdded*/ null"
           >
           </q-uploader>
           <q-space />
@@ -417,7 +419,15 @@ a:hover {
 </style>
 
 <script lang="ts">
-import { defineComponent, ref, Ref, reactive, watch, computed } from "vue";
+import {
+  defineComponent,
+  ref,
+  Ref,
+  reactive,
+  watch,
+  computed,
+  nextTick,
+} from "vue";
 import { useStore } from "src/store";
 import { useQuasar, date, copyToClipboard } from "quasar";
 import { useI18n } from "vue-i18n";
@@ -427,6 +437,7 @@ import FileEntity from "src/entities/FileEntity";
 import { HttpProtocol } from "src/entities/HttpProtocol";
 import NormalResult from "src/entities/NormalResult";
 import { Protocol } from "src/entities/WSProtocol";
+import FileSuffixHelper from "src/common/FileSuffixHelper";
 
 class _BreadcrumbItem {
   name: string = "";
@@ -473,6 +484,8 @@ export default defineComponent({
 
     let show_dialog = ref(false);
     let loading = ref(false);
+    let uploader_loading = ref(false);
+    let uploader_accept = ref("*");
     let uploading = ref(false);
     let files = ref(<FileEntity[]>[]);
     let show_context_menu = ref(false);
@@ -773,6 +786,8 @@ export default defineComponent({
     return {
       show_dialog,
       loading,
+      uploader_loading,
+      uploader_accept,
       uploading,
       files,
       columns,
@@ -795,18 +810,33 @@ export default defineComponent({
       refresh_file_list_async,
       status,
       filters,
-      async showDialog(in_status: string, filter?: string) {
+      showDialogAsync(
-        status.value = in_status;
+        in_status: string,
-        parseFilter(filter);
+        no_filter = true,
-        refresh_usb_devices();
+        video_filter = false,
-        refresh_file_list();
+        image_filter = false
-
+      ) {
-        show_dialog.value = true;
-      },
-      showDialogAsync(in_status: string, filter?: string) {
         return new Promise((_resolve, _reject) => {
           status.value = in_status;
-          parseFilter(filter);
+          {
+            let filter = "";
+            if (!no_filter) {
+              if (video_filter) {
+                filter += FileSuffixHelper.videoSuffix;
+              }
+              if (image_filter) {
+                filter += FileSuffixHelper.imageSuffix;
+              }
+            }
+            parseFilter(filter);
+            if (filter === "") {
+              uploader_accept.value = "*";
+            } else {
+              uploader_accept.value = filter.replace(/;/g, ",");
+            }
+            console.log(filter);
+          }
+
           refresh_usb_devices();
           refresh_file_list();
           show_dialog.value = true;
@@ -1023,6 +1053,78 @@ export default defineComponent({
       onStartUpload() {
         loading.value = true;
       },
+      async onFileAdded(files: File[] | File) {
+        setTimeout(async () => {
+          const onError = async (file: File | null) => {
+            await nextTick(() => {});
+            uploader.value.reset();
+
+            $q.notify({
+              color: "negative",
+              icon: "warning",
+              message: $t.t("load file error") + "!",
+              position: "top",
+              timeout: 3000,
+            });
+          };
+
+          let file: File | null = null;
+
+          try {
+            if (Array.isArray(files)) {
+              if (files.length > 0) {
+                file = files[0];
+              }
+            } else {
+              file = files;
+            }
+            if (file) {
+              const file_name = file.name;
+              const blob = file.slice(0, 1024 * 1024 * 1); // 1 MB
+              uploader_loading.value = true;
+
+              try {
+                let url = GlobalData.getInstance().createCurrentRequestUrl();
+                if (url) {
+                  url.pathname = HttpProtocol.RequestPathCheckFileSupport;
+
+                  // if (FileSuffixHelper.isVideoPath(file_name)) {
+
+                  // }
+                  const data = new FormData();
+                  data.append(
+                    "file",
+                    new File([blob], file_name, {
+                      lastModified: file.lastModified,
+                    })
+                  );
+                  const response = await api.post(url.toString(), data, {
+                    headers: {
+                      "Content-Type": "multipart/form-data",
+                    },
+                  });
+
+                  if (response && response.data && response.data.is_support) {
+                  } else {
+                    onError(file);
+                  }
+                  console.log(response);
+                } else {
+                  throw "";
+                }
+              } catch (e) {
+                console.error(e);
+                onError(file);
+              }
+              uploader_loading.value = false;
+              return;
+            }
+          } catch (e) {
+            console.error(e);
+            onError(file);
+          }
+        }, 1);
+      },
       onUploaded() {
         uploading.value = false;
         uploader.value.reset();

src/components/PlaylistDialog.vue

@@ -189,7 +189,9 @@ export default defineComponent({
       let result = "";
       const obj = await file_manage_dialog.value.showDialogAsync(
         "select",
-        filter
+        no_filter,
+        video_filter,
+        image_filter
       );
       if (obj) {
         interface __I {
@@ -212,7 +214,9 @@ export default defineComponent({
       }
     };
 
-    let filter: string | undefined = "";
+    let no_filter = true;
+    let video_filter = false;
+    let image_filter = false;
 
     return {
       show_dialog,
@@ -222,12 +226,19 @@ export default defineComponent({
 
       addRow,
 
-      showDialogAsync(options: any, _filter?: string) {
+      showDialogAsync(
+        options: any,
+        _no_filter = true,
+        _video_filter = false,
+        _image_filter = false
+      ) {
         if (_resolove) {
           _resolove();
           _resolove = null;
         }
-        filter = _filter;
+        no_filter = _no_filter;
+        video_filter = _video_filter;
+        image_filter = _image_filter;
         initialize_properties(options);
         if (play_list.value.length == 0) {
           addRow();

src/components/SignalSourceDialog.vue

@@ -485,13 +485,19 @@ export default defineComponent({
       }
     };
 
-    const doSelectFile = async (filter: string) => {
+    const doSelectFile = async (
+      no_filter = true,
+      video_filter = false,
+      image_filter = false
+    ) => {
       if (!media_url_label.value.startsWith($t.t("file path"))) {
         return;
       }
       const obj = await file_manage_dialog.value.showDialogAsync(
         "select",
-        filter
+        no_filter,
+        video_filter,
+        image_filter
       );
       if (obj) {
         interface __I {
@@ -515,13 +521,18 @@ export default defineComponent({
       }
     };
 
-    const showPlaylistDialog = async (filter: string | null) => {
+    const showPlaylistDialog = async (
+      no_filter = true,
+      video_filter = false
+    ) => {
       if (item_data.window_type != "EwindowType::Multimedia") {
         return;
       }
       const result = await playlist_dialog.value.showDialogAsync(
         item_data.media_url,
-        filter
+        no_filter,
+        video_filter,
+        false
       );
       if (Array.isArray(result)) {
         if (result.length) {
@@ -642,19 +653,20 @@ export default defineComponent({
         }
       },
       async showVideoPlayListDialog() {
-        return showPlaylistDialog(FileSuffixHelper.videoSuffix);
+        return showPlaylistDialog(false, true);
       },
-      async showPlaylistDialog(filter: string) {
+      async showPlaylistDialog(no_filter = true, video_filter = false) {
-        return showPlaylistDialog(filter);
+        return showPlaylistDialog(no_filter, video_filter);
       },
       async doSelectImageFile() {
-        return doSelectFile(
+        return doSelectFile(false, false, true);
-          GlobalData.getInstance().applicationConfig?.image_suffix_filter ||
-            ".jpg;.png"
-        );
       },
-      async doSelectFile(filter: string) {
+      async doSelectFile(
-        return doSelectFile(filter);
+        no_filter = true,
+        video_filter = false,
+        image_filter = false
+      ) {
+        return doSelectFile(no_filter, video_filter, image_filter);
       },
     };
   },

src/components/TimerSignalSourceDialog.vue

@@ -125,7 +125,7 @@
                         /^(\d{4})\/(\d{2})\/(\d{2}) (\d{2}):(\d{2}):(\d{2})$/.test(
                           v
                         )) ||
-                      $t('zzzzz'),
+                      $t('time format error'),
                   ]"
                   lazy-rules
                   :hint="

src/entities/HttpProtocol.ts

@@ -5,6 +5,7 @@ export namespace HttpProtocol {
   export const RequestPathDBBackup = "/db_backup";
   export const RequestPathListFile = "/list_file";
   export const RequestPathCreateDirectory = "/create_directory";
+  export const RequestPathCheckFileSupport = "/check_file_support";
   export const RequestPathDeleteFile = "/delete_file";
   export const RequestPathRenameFile = "/rename_file";
   export const RequestCheckModeIndex = "/check_mode_index";

src/i18n/zh-CN/index.ts

@@ -582,4 +582,6 @@ export default {
     "客户端依赖Cookie功能。如果当前浏览器未启用Cookie，则客户端无法使用!",
   "Please refresh this page after cookies are enabled":
     "请在开启Cookie功能后刷新该页面",
+  "load file error": "文件加载错误",
+  "time format error": "时间格式错误",
 };

src/pad/ContentWall.vue

@@ -995,7 +995,9 @@ export default defineComponent({
           if (old_signal_source) {
             const obj = await file_manage_dialog.value.showDialogAsync(
               "select",
-              FileSuffixHelper.allSuffix
+              false,
+              true,
+              true
             );
             if (obj) {
               interface __I {
@@ -1102,7 +1104,9 @@ export default defineComponent({
 
         const obj = await file_manage_dialog.value.showDialogAsync(
           "select",
-          FileSuffixHelper.allSuffix
+          false,
+          true.valueOf,
+          true
         );
 
         if (obj) {

src/pad/TopToolbar.vue

@@ -169,7 +169,7 @@
           <q-item
             clickable
             v-close-popup
-            @click="$refs.file_manage_dialog.showDialog()"
+            @click="$refs.file_manage_dialog.showDialogAsync()"
           >
             <q-item-section avatar>
               <q-icon name="img:pad/toolbar/file_upload_icon.png" />

src/pages/TopToolBar.vue

@@ -90,7 +90,7 @@
         :icon="/*description*/ 'img:new_icon/file_manager.png'"
         :label="$t('file manage')"
         class="q-mr-sm"
-        @click="$refs.file_manage_dialog.showDialog()"
+        @click="$refs.file_manage_dialog.showDialogAsync()"
       />
       <q-btn
         stretch

src/pages/WallPage.vue

@@ -1103,7 +1103,9 @@ export default defineComponent({
 
         const obj = await file_manage_dialog.value.showDialogAsync(
           "select",
-          FileSuffixHelper.allSuffix
+          false,
+          true,
+          true
         );
         if (obj) {
           interface __I {
@@ -1188,7 +1190,9 @@ export default defineComponent({
           if (old_signal_source) {
             const obj = await file_manage_dialog.value.showDialogAsync(
               "select",
-              FileSuffixHelper.allSuffix
+              false,
+              true,
+              true
             );
             if (obj) {
               interface __I {

yarn.lock

@@ -8893,10 +8893,10 @@ qs@6.9.6:
   resolved "https://registry.npmmirror.com/qs/-/qs-6.9.6.tgz#26ed3c8243a431b2924aca84cc90471f35d5a0ee"
   integrity sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==
 
-quasar@^2.7.1:
+quasar@^2.7.3:
-  version "2.7.1"
+  version "2.7.3"
-  resolved "https://registry.npmmirror.com/quasar/-/quasar-2.7.1.tgz#a599978ce2f1f6327e6686a01923ccacd9a75ddd"
+  resolved "https://registry.npmmirror.com/quasar/-/quasar-2.7.3.tgz#ff57ac5f3c9a8fdc345f59362d7b0f45c80bc68d"
-  integrity sha512-V2FcD04nHE07p4p0YEeC3ZIA9kodyZ5wdZ+eXRZhUZ3cFugAneJ1D2WCyKoqwM4OReFCk/1jlqQxCCUaTU4X3g==
+  integrity sha512-4YQQP1FbfshXwav9QcOHpvSg4eME4iKzd85m4562EqcfuhRtycC/2WQg+cRxlEr43gEHM0uXaJmybNUWZpoYkw==
 
 query-string@^5.0.1:
   version "5.1.1"