ayanova/src/views/adm-import.vue

@@ -21,12 +21,12 @@
           show-size
         ></v-file-input
         ><v-btn
-          v-if="uploadFile.name && ayaType != 0"
+          v-if="uploadFile && uploadFile.name && ayaType != 0"
           :loading="uploading"
           color="primary"
           text
-          @click="upload"
+          @click="process"
-          >{{ $ay.t("Upload") }}</v-btn
+          >{{ $ay.t("Import") }}</v-btn
         >
       </v-col>
 
@@ -43,7 +43,7 @@
   </div>
 </template>
 <script>
-import papa from "papaparse";
+import Papa from "papaparse";
 const FORM_KEY = "adm-import";
 export default {
   data() {
@@ -70,25 +70,51 @@ export default {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
   methods: {
-    async upload() {
+    async process() {
-      console.log("UPLOAD: uploadFile is:", this.uploadFile);
+      if (!this.uploadFile) {
-      if (this.uploadFile && this.uploadFile.name) {
+        return;
-        console.log("Processing uploadfile");
-        papa.parse(this.uploadFile, {
-          header: true,
-          dynamicTyping: true,
-          worker: true,
-          step: function(row) {
-            console.log("Row:", row.data);
-          },
-          complete: function() {
-            console.log("All done!");
       }
-        });
+      try {
+        console.log("Upload file is:", this.uploadFile);
+        let fileType = this.uploadFile.type.toLowerCase();
+        if (!fileType.includes("csv") && !fileType.includes("json")) {
+          throw new Error("Not supported file type, must be .csv or .json");
+        }
+        const isCSV = fileType.includes("csv");
+        let dat = null;
+        if (isCSV) {
+          dat = await parseCSVFile(this.uploadFile);
+          console.log("Done parseCSVFile");
         } else {
-        console.log("NO upload file");
+          dat = await parseJSONFile(this.uploadFile);
+          console.log("Done parse json");
         }
 
+        console.log("The final data is ", dat);
+      } catch (error) {
+        window.$gz.errorHandler.handleFormError(error);
+      } finally {
+        this.uploading = false;
+      }
+    },
+    async upload() {
+      if (!this.uploadFile) {
+        return;
+      }
+      try {
+        // console.log("Upload file is:", this.uploadFile);
+        // let fileType = this.uploadFile.type.toLowerCase();
+        // if (!fileType.includes("csv") && !fileType.includes("json")) {
+        //   throw new Error("Not supported file type, must be .csv or .json");
+        // }
+        // const isCSV = fileType.includes("csv");
+        // let dat = null;
+        // if (isCSV) {
+        //   dat = await parse(this.uploadFile);
+        // } else {
+        //   dat = JSON.parse(this.uploadFile);
+        // }
+        // console.log("The final data is ", dat);
         //similar code in wiki-control
         // const vm = this;
         // const fileData = [];
@@ -96,14 +122,11 @@ export default {
         //   const f = vm.uploadFile[i];
         //   fileData.push({ name: f.name, lastModified: f.lastModified });
         // }
-
         // const at = {
         //   ayaType: vm.ayaType,
         //   files: vm.uploadFile,
         //   fileData: JSON.stringify(fileData)
         // };
-
-      // try {
         //   vm.uploading = true;
         //   const res = await window.$gz.api.upload("import/upload", at);
         //   if (res.error) {
@@ -119,11 +142,11 @@ export default {
         //       outText
         //     );
         //   }
-      // } catch (error) {
+      } catch (error) {
-      //   window.$gz.errorHandler.handleFormError(error);
+        window.$gz.errorHandler.handleFormError(error);
-      // } finally {
+      } finally {
-      //   vm.uploading = false;
+        this.uploading = false;
-      // }
+      }
     },
     handleSelected() {}
   }
@@ -180,4 +203,50 @@ async function populateSelectionLists(vm) {
     "importable"
   );
 }
+
+//////////////////////////////////////////////////////////
+//
+// Parse csv and return results as JSON, handle errors if any
+//
+async function parseCSVFile(file) {
+  Papa.parsePromise = function(file) {
+    return new Promise(function(complete, error) {
+      Papa.parse(file, {
+        header: true,
+        dynamicTyping: true,
+        worker: true,
+        complete,
+        error
+      });
+    });
+  };
+
+  let results;
+  await Papa.parsePromise(file).then(function(parsedData) {
+    results = parsedData;
+  });
+
+  return results;
+}
+
+//////////////////////////////////////////////////////////
+//
+// Open local json file, read, parse and return results as JSON, handle errors if any
+//
+async function parseJSONFile(file) {
+  return new Promise(function(complete) {
+    const reader = new FileReader();
+    reader.addEventListener(
+      "load",
+      () => {
+        // this will then display a text file
+        complete(JSON.parse(reader.result));
+      },
+      false
+    );
+    if (file) {
+      reader.readAsText(file);
+    }
+  });
+}
 </script>