From ff3353206e643773381098110a546a0093e69ec7 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 18 Aug 2022 12:14:50 +0200
Subject: [PATCH] feat(gui-v2): allow import file to be selected with file
 dialog

---
 .../[projectId]/index/index/index.vue         | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
index b389ec8142..d6624356c8 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
@@ -1,13 +1,15 @@
 <script lang="ts" setup>
 import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
-import { ref, useDialog, useDropZone, useNuxtApp } from '#imports'
+import { ref, useDialog, useDropZone, useFileDialog, useNuxtApp, watch } from '#imports'
 import DlgQuickImport from '~/components/dlg/QuickImport.vue'
 
 const dropZone = ref<HTMLDivElement>()
 
 const { isOverDropZone } = useDropZone(dropZone, onDrop)
 
+const { files, open, reset } = useFileDialog()
+
 const { $e } = useNuxtApp()
 
 type QuickImportTypes = 'excel' | 'json' | 'csv'
@@ -23,6 +25,16 @@ const allowedQuickImportTypes = [
   '.json',
 ]
 
+watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles), { flush: 'post' })
+
+function onFileSelect(fileList: FileList | null) {
+  if (!fileList) return
+
+  const files = Array.from(fileList).map((file) => file)
+
+  onDrop(files)
+}
+
 function onDrop(droppedFiles: File[] | null) {
   if (!droppedFiles) return
 
@@ -87,6 +99,8 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
     isOpen.value = false
 
     close(1000)
+
+    reset()
   }
 }
 </script>
@@ -95,10 +109,11 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
   <div ref="dropZone" class="h-full w-full text-gray-600 flex items-center justify-center relative">
     <general-overlay
       :model-value="true"
-      :class="[isOverDropZone ? 'bg-gray-300/75 border-primary shadow' : 'bg-gray-100/25 border-gray-500 pointer-events-none']"
+      :class="[isOverDropZone ? 'bg-gray-300/75 border-primary shadow' : 'bg-gray-100/25 border-gray-500 cursor-pointer']"
       inline
       style="top: 20%; left: 20%; right: 20%; bottom: 20%"
-      class="text-3xl flex items-center justify-center gap-2 border-1 border-dashed rounded"
+      class="text-3xl flex items-center justify-center gap-2 border-1 border-dashed rounded hover:border-primary"
+      @click="open"
     >
       <template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here </template>
     </general-overlay>