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

2022-06-21 15:23:40 +08:00 · 2022-06-21 15:23:40 +08:00 · 2c5bed4304
parent 740e831202
commit 2c5bed4304
12 changed files with 177 additions and 41 deletions
--- a/package.json
+++ b/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",
--- a/src/components/FileManageDialog.vue
+++ b/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) {
-        status.value = in_status;
-        parseFilter(filter);
-        refresh_usb_devices();
-        refresh_file_list();
-
-        show_dialog.value = true;
-      },
-      showDialogAsync(in_status: string, filter?: string) {
+      showDialogAsync(
+        in_status: string,
+        no_filter = true,
+        video_filter = false,
+        image_filter = false
+      ) {
        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();
--- a/src/components/PlaylistDialog.vue
+++ b/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();
--- a/src/components/SignalSourceDialog.vue
+++ b/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) {
-        return showPlaylistDialog(filter);
+      async showPlaylistDialog(no_filter = true, video_filter = false) {
+        return showPlaylistDialog(no_filter, video_filter);
      },
      async doSelectImageFile() {
-        return doSelectFile(
-          GlobalData.getInstance().applicationConfig?.image_suffix_filter ||
-            ".jpg;.png"
-        );
+        return doSelectFile(false, false, true);
      },
-      async doSelectFile(filter: string) {
-        return doSelectFile(filter);
+      async doSelectFile(
+        no_filter = true,
+        video_filter = false,
+        image_filter = false
+      ) {
+        return doSelectFile(no_filter, video_filter, image_filter);
      },
    };
  },
--- a/src/components/TimerSignalSourceDialog.vue
+++ b/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="
--- a/src/entities/HttpProtocol.ts
+++ b/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";
--- a/src/i18n/zh-CN/index.ts
+++ b/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": "时间格式错误",
 };
--- a/src/pad/ContentWall.vue
+++ b/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) {
--- a/src/pad/TopToolbar.vue
+++ b/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" />
--- a/src/pages/TopToolBar.vue
+++ b/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
--- a/src/pages/WallPage.vue
+++ b/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 {
--- a/yarn.lock
+++ b/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:
-  version "2.7.1"
-  resolved "https://registry.npmmirror.com/quasar/-/quasar-2.7.1.tgz#a599978ce2f1f6327e6686a01923ccacd9a75ddd"
-  integrity sha512-V2FcD04nHE07p4p0YEeC3ZIA9kodyZ5wdZ+eXRZhUZ3cFugAneJ1D2WCyKoqwM4OReFCk/1jlqQxCCUaTU4X3g==
+quasar@^2.7.3:
+  version "2.7.3"
+  resolved "https://registry.npmmirror.com/quasar/-/quasar-2.7.3.tgz#ff57ac5f3c9a8fdc345f59362d7b0f45c80bc68d"
+  integrity sha512-4YQQP1FbfshXwav9QcOHpvSg4eME4iKzd85m4562EqcfuhRtycC/2WQg+cRxlEr43gEHM0uXaJmybNUWZpoYkw==

 query-string@^5.0.1:
  version "5.1.1"