feat: read as base64 in insert data block

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

@@ -117,13 +117,21 @@
                 </ui-button>
                 <div class="flex-grow" />
                 <ui-select
-                  v-if="item.filePath.endsWith('.csv')"
-                  v-model="item.csvAction"
-                  placeholder="CSV File Action"
+                  :model-value="item.action || item.csvAction"
+                  placeholder="File Action"
+                  @change="item.action = $event"
                 >
-                  <option value="text">Read as text</option>
-                  <option value="json">Read as JSON</option>
-                  <option value="json-header">Read as JSON with headers</option>
+                  <option value="default">Default</option>
+                  <option value="base64">Read as base64</option>
+                  <optgroup
+                    v-if="item.filePath.endsWith('.csv')"
+                    label="CSV File"
+                  >
+                    <option value="json">Read as JSON</option>
+                    <option value="json-header">
+                      Read as JSON with headers
+                    </option>
+                  </optgroup>
                 </ui-select>
               </template>
             </div>
@@ -151,7 +159,7 @@ import { useI18n } from 'vue-i18n';
 import { useToast } from 'vue-toastification';
 import Papa from 'papaparse';
 import browser from 'webextension-polyfill';
-import getFile from '@/utils/getFile';
+import getFile, { readFileAsBase64 } from '@/utils/getFile';
 import EditAutocomplete from './EditAutocomplete.vue';
 
 const SharedCodemirror = defineAsyncComponent(() =>
@@ -200,7 +208,7 @@ function addItem() {
     value: '',
     filePath: '',
     isFile: false,
-    csvAction: 'text',
+    action: 'default',
   });
 }
 function changeItemType(index, type) {
@@ -223,19 +231,28 @@ async function previewData(index, item) {
     const path = item.filePath || '';
     const isJSON = path.endsWith('.json');
     const isCSV = path.endsWith('.csv');
+    let action = item.action || item.csvAction || 'default';
+
+    if (action === 'text' && !isCSV) action = 'default';
+
+    let stringify = isJSON && action !== 'base64';
+    let responseType = isJSON ? 'json' : 'text';
+
+    if (action === 'base64') responseType = 'blob';
 
-    let stringify = isJSON;
     let result = await getFile(path, {
+      responseType,
       returnValue: true,
-      responseType: isJSON ? 'json' : 'text',
     });
 
-    if (result && isCSV && item.csvAction && item.csvAction.includes('json')) {
+    if (result && isCSV && action && action.includes('json')) {
       const parsedCSV = Papa.parse(result, {
-        header: item.csvAction.includes('header'),
+        header: action.includes('header'),
       });
       result = parsedCSV.data || [];
       stringify = true;
+    } else if (action === 'base64') {
+      result = await readFileAsBase64(result);
     }
 
     previewState.itemId = index;

src/utils/getFile.js

@@ -1,4 +1,4 @@
-function readFile(blob) {
+export function readFileAsBase64(blob) {
   return new Promise((resolve) => {
     const reader = new FileReader();
     reader.onload = () => {
@@ -23,7 +23,7 @@ async function downloadFile(url, options) {
     const objUrl = URL.createObjectURL(result);
     return { objUrl, path: url, type: result.type };
   }
-  const base64 = await readFile(result);
+  const base64 = await readFileAsBase64(result);
   return { path: url, objUrl: base64, type: result.type };
 }
 function getLocalFile(path, options) {

src/workflowEngine/blocksHandler/handlerInsertData.js

@@ -1,6 +1,6 @@
 import Papa from 'papaparse';
 import { parseJSON } from '@/utils/helper';
-import getFile from '@/utils/getFile';
+import getFile, { readFileAsBase64 } from '@/utils/getFile';
 import renderString from '../templating/renderString';
 
 async function insertData({ id, data }, { refData }) {
@@ -19,21 +19,24 @@ async function insertData({ id, data }, { refData }) {
       const isJSON = path.endsWith('.json');
       const isCSV = path.endsWith('.csv');
 
+      let action = item.action || item.csvAction || 'default';
+      if (action === 'text' && !isCSV) action = 'default';
+
+      let responseType = isJSON ? 'json' : 'text';
+      if (action === 'base64') responseType = 'blob';
+
       let result = await getFile(path, {
+        responseType,
         returnValue: true,
-        responseType: isJSON ? 'json' : 'text',
       });
 
-      if (
-        result &&
-        isCSV &&
-        item.csvAction &&
-        item.csvAction.includes('json')
-      ) {
+      if (result && isCSV && action && action.includes('json')) {
         const parsedCSV = Papa.parse(result, {
-          header: item.csvAction.includes('header'),
+          header: action.includes('header'),
         });
         result = parsedCSV.data || [];
+      } else if (action === 'base64') {
+        result = await readFileAsBase64(result);
       }
 
       value = result;