feat: allow import multiple workflows

src/components/newtab/workflow/edit/EditExportData.vue

@@ -47,7 +47,7 @@
       class="mt-2"
       @change="updateData({ addBOMHeader: $event })"
     >
-      Add UTF-8 BOM
+      {{ t('workflow.blocks.export-data.bomHeader') }}
     </ui-checkbox>
   </div>
 </template>

src/components/newtab/workflow/edit/EditLoopData.vue

@@ -207,7 +207,7 @@ function updateLoopID(id) {
 }
 function importFile() {
   openFilePicker(['application/json', 'text/csv', 'application/vnd.ms-excel'])
-    .then(async (fileObj) => {
+    .then(async ([fileObj]) => {
       if (fileObj.size > maxFileSize) {
         toast.error(t('message.maxSizeExceeded'));
         return;

src/locales/en/blocks.json

@@ -236,6 +236,7 @@
         "description": "Export workflow data",
         "exportAs": "Export as",
         "refKey": "Reference key",
+        "bomHeader": "Add UTF-8 BOM",
         "dataToExport": {
           "placeholder": "Data to export",
           "options": {

src/newtab/pages/Workflows.vue

@@ -50,7 +50,7 @@
         <v-remixicon name="riCompass3Line" class="mr-2 -ml-1" />
         {{ t('workflow.browse') }}
       </ui-button>
-      <ui-button @click="importWorkflow">
+      <ui-button @click="importWorkflow({ multiple: true })">
         <v-remixicon name="riUploadLine" class="mr-2 -ml-1" />
         {{ t('workflow.import') }}
       </ui-button>

src/newtab/pages/settings/Backup.vue

@@ -215,29 +215,16 @@ function backupWorkflows() {
 }
 async function restoreWorkflows() {
   try {
-    const file = await openFilePicker('application/json');
+    const [file] = await openFilePicker('application/json');
     const reader = new FileReader();
     const insertWorkflows = (workflows) => {
-      workflows.forEach((workflow) => {
-        const isWorkflowExists = Workflow.query()
-          .where('id', workflow.id)
-          .exists();
-
-        if (!state.updateIfExists || !isWorkflowExists) {
+      const newWorkflows = workflows.map((workflow) => {
+        if (!state.updateIfExists) {
           workflow.createdAt = Date.now();
           delete workflow.id;
-
-          Workflow.insert({
-            data: workflow,
-          });
-
-          return;
         }
 
-        Workflow.update({
-          where: workflow.id,
-          data: workflow,
-        });
+        return workflow;
       });
       const showMessage = (event) => {
         toast(

src/utils/helper.js

@@ -98,7 +98,7 @@ export function replaceMustache(str, replacer) {
 }
 
 export function openFilePicker(acceptedFileTypes = [], attrs = {}) {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     const input = document.createElement('input');
     input.type = 'file';
     input.accept = Array.isArray(acceptedFileTypes)
@@ -110,14 +110,16 @@ export function openFilePicker(acceptedFileTypes = [], attrs = {}) {
     });
 
     input.onchange = (event) => {
-      const file = event.target.files[0];
+      const { files } = event.target;
+      const validFiles = [];
 
-      if (!file || !acceptedFileTypes.includes(file.type)) {
-        reject(new Error(`Invalid ${file.type} file type`));
-        return;
-      }
+      files.forEach((file) => {
+        if (!acceptedFileTypes.includes(file.type)) return;
+
+        validFiles.push(file);
+      });
 
-      resolve(file);
+      resolve(validFiles);
     };
 
     input.click();

src/utils/workflow-data.js

@@ -1,17 +1,15 @@
 import { parseJSON, fileSaver, openFilePicker, isObject } from './helper';
 import Workflow from '@/models/workflow';
 
-export function importWorkflow() {
-  openFilePicker(['application/json'])
-    .then((file) => {
-      const reader = new FileReader();
+export function importWorkflow(attrs = {}) {
+  openFilePicker(['application/json'], attrs)
+    .then((files) => {
       const getDrawflow = ({ drawflow }) => {
         if (isObject(drawflow)) return JSON.stringify(drawflow);
 
         return drawflow;
       };
-
-      reader.onload = ({ target }) => {
+      const handleOnLoadReader = ({ target }) => {
         const workflow = JSON.parse(target.result);
 
         if (workflow.includedWorkflows) {
@@ -52,7 +50,12 @@ export function importWorkflow() {
         });
       };
 
-      reader.readAsText(file);
+      files.forEach((file) => {
+        const reader = new FileReader();
+
+        reader.onload = handleOnLoadReader;
+        reader.readAsText(file);
+      });
     })
     .catch((error) => {
       console.error(error);