From 054497673080d8cb372d4e96dfc35857f99c51c1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 23 Jun 2022 11:13:50 +0530
Subject: [PATCH] fix: json import - correction in file upload

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/import/JSONImport.vue   | 144 ++++++++----------
 1 file changed, 67 insertions(+), 77 deletions(-)

diff --git a/packages/nc-gui/components/import/JSONImport.vue b/packages/nc-gui/components/import/JSONImport.vue
index 9e0f34075d..a096f92fc0 100644
--- a/packages/nc-gui/components/import/JSONImport.vue
+++ b/packages/nc-gui/components/import/JSONImport.vue
@@ -9,54 +9,54 @@
             </v-icon>
             <span class="caption text-capitalize">Upload</span>
           </v-tab>
-          <v-tab>
-            <!--            <v-icon small class="mr-1">
+          <!--          <v-tab>-->
+          <!--            <v-icon small class="mr-1">
               mdi-link-variant
             </v-icon>
             <span class="caption text-capitalize">URL</span>
           </v-tab>-->
-            <v-tab>
-              <v-icon small class="mr-1">
-                mdi-link-variant
-              </v-icon>
-              <span class="caption text-capitalize">String</span>
-            </v-tab>
-
-            <v-tab-item>
-              <div class="nc-json-import-tab-item ">
-                <div
-                  class="nc-droppable d-flex align-center justify-center flex-column"
-                  :style="{
-                    background : dragOver ? '#7772' : ''
-                  }"
-                  @click="$refs.file.click()"
-                  @drop.prevent="dropHandler"
-                  @dragover.prevent="dragOver = true"
-                  @dragenter.prevent="dragOver = true"
-                  @dragexit="dragOver = false"
-                  @dragleave="dragOver = false"
-                  @dragend="dragOver = false"
-                >
-                  <x-icon :color="['primary','grey']" size="50">
-                    mdi-file-plus-outline
-                  </x-icon>
-                  <p class="title  mb-1 mt-2">
-                    <!-- Select File to Upload-->
-                    {{ $t('msg.info.upload') }}
-                  </p>
-                  <p class="grey--text mb-1">
-                    <!-- or drag and drop file-->
-                    {{ $t('msg.info.upload_sub') }}
-                  </p>
-
-                  <p v-if="quickImportType == 'excel'" class="caption grey--text">
-                    <!-- Supported: .xls, .xlsx, .xlsm, .ods, .ots -->
-                    {{ $t('msg.info.excelSupport') }}
-                  </p>
-                </div>
+          <v-tab>
+            <v-icon small class="mr-1">
+              mdi-link-variant
+            </v-icon>
+            <span class="caption text-capitalize">String</span>
+          </v-tab>
+
+          <v-tab-item>
+            <div class="nc-json-import-tab-item ">
+              <div
+                class="nc-droppable d-flex align-center justify-center flex-column"
+                :style="{
+                  background : dragOver ? '#7772' : ''
+                }"
+                @click="$refs.file.click()"
+                @drop.prevent="dropHandler"
+                @dragover.prevent="dragOver = true"
+                @dragenter.prevent="dragOver = true"
+                @dragexit="dragOver = false"
+                @dragleave="dragOver = false"
+                @dragend="dragOver = false"
+              >
+                <x-icon :color="['primary','grey']" size="50">
+                  mdi-file-plus-outline
+                </x-icon>
+                <p class="title  mb-1 mt-2">
+                  <!-- Select File to Upload-->
+                  {{ $t('msg.info.upload') }}
+                </p>
+                <p class="grey--text mb-1">
+                  <!-- or drag and drop file-->
+                  {{ $t('msg.info.upload_sub') }}
+                </p>
+
+                <p v-if="quickImportType == 'excel'" class="caption grey--text">
+                  <!-- Supported: .xls, .xlsx, .xlsm, .ods, .ots -->
+                  {{ $t('msg.info.excelSupport') }}
+                </p>
               </div>
-            </v-tab-item>
-            <!--          <v-tab-item>
+            </div>
+          </v-tab-item>
+          <!--          <v-tab-item>
             <div class="nc-json-import-tab-item align-center">
               <div class="pa-4 d-100 h-100">
                 <v-form ref="form" v-model="valid">
@@ -85,33 +85,32 @@
               </div>
             </div>
           </v-tab-item>-->
-            <v-tab-item>
-              <div class="nc-json-import-tab-item align-center">
-                <div class="pa-4 d-100 h-100">
-                  <v-form ref="form" v-model="valid">
-                    <div class="nc-json-editor-wrapper">
-                      <v-btn small class="nc-json-format-btn" @click="formatJson">
-                        Format
-                      </v-btn>
+          <v-tab-item>
+            <div class="nc-json-import-tab-item align-center">
+              <div class="pa-4 d-100 h-100">
+                <v-form ref="form" v-model="valid">
+                  <div class="nc-json-editor-wrapper">
+                    <v-btn small class="nc-json-format-btn" @click="formatJson">
+                      Format
+                    </v-btn>
 
-                      <!--label="Enter excel file url"-->
-                      <monaco-json-editor
-                        ref="editor"
-                        v-model="jsonString"
-                        style="height:320px"
-                      />
-                      <div class="text-center mt-4">
-                        <v-btn v-t="['c:project:create:excel:load-url']" class="ml-3" color="primary" @click="loadJsonString">
-                          <!--Load-->
-                          {{ $t('general.load') }}
-                        </v-btn>
-                      </div>
+                    <!--label="Enter excel file url"-->
+                    <monaco-json-editor
+                      ref="editor"
+                      v-model="jsonString"
+                      style="height:320px"
+                    />
+                    <div class="text-center mt-4">
+                      <v-btn v-t="['c:project:create:excel:load-url']" class="ml-3" color="primary" @click="loadJsonString">
+                        <!--Load-->
+                        {{ $t('general.load') }}
+                      </v-btn>
                     </div>
-                  </v-form>
-                </div>
+                  </div>
+                </v-form>
               </div>
-            </v-tab-item>
-          </v-tab>
+            </div>
+          </v-tab-item>
         </v-tabs>
 
         <div class="px-4 pb-2">
@@ -166,15 +165,6 @@
     <v-tooltip bottom>
       <template #activator="{on}">
         <input
-          v-if="quickImportType == 'excel'"
-          ref="file"
-          class="nc-json-import-input"
-          type="file"
-          style="display: none"
-          @change="_change($event)"
-        >
-        <input
-          v-if="quickImportType == 'csv'"
           ref="file"
           class="nc-json-import-input"
           type="file"
@@ -341,7 +331,7 @@ export default {
         console.log('error', e)
         this.$store.commit('loader/MutClear')
       }
-      reader.readAsArrayBuffer(file)
+      reader.readAsText(file)
     },
 
     async parseAndExtractData(type, val, name) {