properly read file data in multipart form request type

Author: jsajal

package.json

@@ -56,6 +56,7 @@
     "date-fns": "^3.6.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.29.1",
+    "form-data": "^4.0.0",
     "immer": "^10.0.4",
     "lodash": "^4.17.21",
     "mousetrap": "^1.6.5",

packages/flowtest-cli/bin/index.js

@@ -83,7 +83,7 @@ const argv = yargs(hideBin(process.argv))
           if (flowData.nodes.find((n) => n.type === 'flowNode')) {
             console.log(
               chalk.blue(
-                '[Note] This flow contains nested flows so run it from parent directory of collection. Ignore if already doing that. \n',
+                '[Note] This flow contains nested flows so run it from root directory of collection. Ignore if already doing that. \n',
               ),
             );
           }

packages/flowtest-electron/src/ipc/collection.js

@@ -18,6 +18,8 @@ const FlowtestAI = require('../ai/flowtestai');
 const { stringify, parse } = require('flatted');
 const { deserialize, serialize } = require('../utils/flowparser/parser');
 const { axiosClient } = require('./axiosClient');
+const FormData = require('form-data');
+const { extend } = require('lodash');
 
 const collectionStore = new Collections();
 const flowTestAI = new FlowtestAI();
@@ -283,23 +285,38 @@ const registerRendererEventHandlers = (mainWindow, watcher) => {
     }
   });
 
-  ipcMain.handle('renderer:run-http-request', async (event, request) => {
+  ipcMain.handle('renderer:run-http-request', async (event, request, collectionPath) => {
     try {
-      if (request.headers['Content-type'] === 'multipart/form-data') {
-        const requestData = new FormData();
-        const file = await convertBase64ToBlob(request.data.value);
-        requestData.append(request.data.key, file, request.data.name);
+      if (request.headers['content-type'] === 'multipart/form-data') {
+        const formData = new FormData();
+        const params = request.data;
+        await params.map(async (param, index) => {
+          if (param.type === 'text') {
+            formData.append(param.key, param.value);
+          }
+
+          if (param.type === 'file') {
+            let trimmedFilePath = param.value.trim();
+
+            if (!path.isAbsolute(trimmedFilePath)) {
+              trimmedFilePath = path.join(collectionPath, trimmedFilePath);
+            }
 
-        request.data = requestData;
+            formData.append(param.key, fs.createReadStream(trimmedFilePath), path.basename(trimmedFilePath));
+          }
+        });
+
+        request.data = formData;
+        extend(request.headers, formData.getHeaders());
       }
 
-      // assuming 'application/json' type
       const options = {
         ...request,
         signal: newAbortSignal(),
       };
 
       const result = await axios(options);
+
       return {
         status: result.status,
         statusText: result.statusText,

pnpm-lock.yaml

@@ -11,7 +11,7 @@ import setVarNode from './compute/setvarnode';
 import { LogLevel } from './GraphLogger';
 
 class Graph {
-  constructor(nodes, edges, startTime, initialEnvVars, logger, caller) {
+  constructor(nodes, edges, startTime, initialEnvVars, logger, caller, collectionPath) {
     this.nodes = nodes;
     this.edges = edges;
     this.logger = logger;
@@ -21,6 +21,7 @@ class Graph {
     this.auth = undefined;
     this.envVariables = initialEnvVars;
     this.caller = caller;
+    this.collectionPath = collectionPath;
   }
 
   #checkTimeout() {
@@ -125,7 +126,14 @@ class Graph {
       }
 
       if (node.type === 'requestNode') {
-        const rNode = new requestNode(node.data, prevNodeOutputData, this.envVariables, this.auth, this.logger);
+        const rNode = new requestNode(
+          node.data,
+          prevNodeOutputData,
+          this.envVariables,
+          this.auth,
+          this.logger,
+          this.collectionPath,
+        );
         result = await rNode.evaluate();
         // add post response variables if any
         if (result.postRespVars) {
@@ -146,6 +154,7 @@ class Graph {
             this.envVariables,
             this.logger,
             node.type,
+            this.collectionPath,
           );
           result = await cNode.evaluate();
           this.envVariables = result.envVars;

src/components/molecules/flow/graph/Graph.js

@@ -2,9 +2,9 @@ import Graph1 from '../Graph';
 import Node from './node';
 
 class nestedFlowNode extends Node {
-  constructor(nodes, edges, startTime, initialEnvVars, logger, caller) {
+  constructor(nodes, edges, startTime, initialEnvVars, logger, caller, collectionPath) {
     super('flowNode');
-    this.internalGraph = new Graph1(nodes, edges, startTime, initialEnvVars, logger, caller);
+    this.internalGraph = new Graph1(nodes, edges, startTime, initialEnvVars, logger, caller, collectionPath);
   }
 
   async evaluate() {

src/components/molecules/flow/graph/compute/nestedflownode.js

@@ -1,15 +1,17 @@
+import { cloneDeep } from 'lodash';
 import { computeNodeVariables, computeVariables } from '../compute/utils';
 import { LogLevel } from '../GraphLogger';
 import Node from './node';
 
 class requestNode extends Node {
-  constructor(nodeData, prevNodeOutputData, envVariables, auth, logger) {
+  constructor(nodeData, prevNodeOutputData, envVariables, auth, logger, collectionPath) {
     super('requestNode');
     this.nodeData = nodeData;
     this.prevNodeOutputData = prevNodeOutputData;
     this.envVariables = envVariables;
     this.auth = auth;
     this.logger = logger;
+    this.collectionPath = collectionPath;
   }
 
   async evaluate() {
@@ -28,14 +30,10 @@ class requestNode extends Node {
     console.debug('Evaluated Url: ', finalUrl);
 
     // step 3
-    const options = this.formulateRequest(finalUrl, variablesDict);
+    const options = await this.formulateRequest(finalUrl, variablesDict);
 
     const res = await this.runHttpRequest(options);
 
-    if (this.nodeData?.requestBody?.type === 'form-data') {
-      options.data.value = '<BASE64_ENCODED_FILE_DATA>';
-    }
-
     if (res.error) {
       this.logger.add(LogLevel.ERROR, 'HTTP request failed', {
         type: 'requestNode',
@@ -81,7 +79,7 @@ class requestNode extends Node {
     }
   }
 
-  formulateRequest(finalUrl, variablesDict) {
+  async formulateRequest(finalUrl, variablesDict) {
     let restMethod = this.nodeData.requestType.toLowerCase();
     let contentType = 'application/json';
     let requestData = undefined;
@@ -94,19 +92,16 @@ class requestNode extends Node {
           : JSON.parse('{}');
       } else if (this.nodeData.requestBody.type === 'form-data') {
         contentType = 'multipart/form-data';
-        requestData = {
-          key: computeVariables(this.nodeData.requestBody.body.key, variablesDict),
-          value: this.nodeData.requestBody.body.value,
-          name: this.nodeData.requestBody.body.name,
-        };
+        const params = cloneDeep(this.nodeData.requestBody.body);
+        requestData = params;
       }
     }
 
     const options = {
       method: restMethod,
       url: finalUrl,
       headers: {
-        'Content-type': contentType,
+        'content-type': contentType,
       },
       data: requestData,
     };
@@ -124,7 +119,7 @@ class requestNode extends Node {
     const { ipcRenderer } = window;
 
     return new Promise((resolve, reject) => {
-      ipcRenderer.invoke('renderer:run-http-request', request).then(resolve).catch(reject);
+      ipcRenderer.invoke('renderer:run-http-request', request, this.collectionPath).then(resolve).catch(reject);
     });
   }
 }

src/components/molecules/flow/graph/compute/requestnode.js

@@ -243,7 +243,7 @@ const Flow = ({ tab, collectionId }) => {
       >
         <Background variant='dots' gap={12} size={1} />
         <Controls
-          className='flex shadow-none border-cyan-900'
+          className='flex border-cyan-900 shadow-none'
           onFitView={() => setViewport(reactFlowInstance.getViewport())}
         ></Controls>
         <Button
@@ -257,10 +257,10 @@ const Flow = ({ tab, collectionId }) => {
             try {
               let envVariables = {};
 
-              const activeEnv = useCollectionStore
-                .getState()
-                .collections.find((c) => c.id === collectionId)
-                ?.environments.find((e) => e.name === useTabStore.getState().selectedEnv);
+              const activeCollection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
+              const activeEnv = activeCollection?.environments.find(
+                (e) => e.name === useTabStore.getState().selectedEnv,
+              );
               if (activeEnv) {
                 envVariables = cloneDeep(activeEnv.variables);
               }
@@ -273,6 +273,7 @@ const Flow = ({ tab, collectionId }) => {
                 envVariables,
                 logger,
                 'main',
+                activeCollection.pathname,
               );
               const result = await g.run();
               const time = Date.now() - startTime;