fix(#352): Variable interpolation for multipart form body

- Moved creation of FormData object into interpolation phase
  - BREAKING: This means that one can no longer access FormData directly
    in the pre-request script, instead the body is now an object.

packages/bruno-cli/changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- Fixed variable interpolation for multipart form body
+
 ## 1.1.0
 
 - Upgraded axios to 1.5.1

packages/bruno-cli/src/runner/interpolate-vars.js

@@ -1,5 +1,6 @@
 const Handlebars = require('handlebars');
-const { each, forOwn, cloneDeep } = require('lodash');
+const FormData = require('form-data');
+const { each, forOwn, cloneDeep, extend } = require('lodash');
 
 const getContentType = (headers = {}) => {
   let contentType = '';
@@ -90,6 +91,16 @@ const interpolateVars = (request, envVars = {}, collectionVariables = {}, proces
         request.data = JSON.parse(parsed);
       } catch (err) {}
     }
+  } else if (contentType === 'multipart/form-data') {
+    // make axios work in node using form data
+    // reference: https://github.com/axios/axios/issues/1006#issuecomment-320165427
+    const form = new FormData();
+    forOwn(request.data, (value, name) => {
+      form.append(interpolate(name), interpolate(value));
+    });
+
+    extend(request.headers, form.getHeaders());
+    request.data = form;
   } else {
     request.data = interpolate(request.data);
   }

packages/bruno-cli/src/runner/run-single-request.js

@@ -3,8 +3,7 @@ const qs = require('qs');
 const chalk = require('chalk');
 const decomment = require('decomment');
 const fs = require('fs');
-const { forOwn, isUndefined, isNull, each, extend, get, compact } = require('lodash');
-const FormData = require('form-data');
+const { isUndefined, isNull, each, get, compact } = require('lodash');
 const prepareRequest = require('./prepare-request');
 const interpolateVars = require('./interpolate-vars');
 const { interpolateString } = require('./interpolate-string');
@@ -37,17 +36,6 @@ const runSingleRequest = async function (
 
     const scriptingConfig = get(brunoConfig, 'scripts', {});
 
-    // make axios work in node using form data
-    // reference: https://github.com/axios/axios/issues/1006#issuecomment-320165427
-    if (request.headers && request.headers['content-type'] === 'multipart/form-data') {
-      const form = new FormData();
-      forOwn(request.data, (value, key) => {
-        form.append(key, value);
-      });
-      extend(request.headers, form.getHeaders());
-      request.data = form;
-    }
-
     // run pre-request vars
     const preRequestVars = get(bruJson, 'request.vars.req');
     if (preRequestVars?.length) {

packages/bruno-electron/src/ipc/network/interpolate-vars.js

@@ -1,5 +1,6 @@
 const Handlebars = require('handlebars');
-const { each, forOwn, cloneDeep } = require('lodash');
+const FormData = require('form-data');
+const { each, forOwn, cloneDeep, extend } = require('lodash');
 
 const getContentType = (headers = {}) => {
   let contentType = '';
@@ -92,6 +93,16 @@ const interpolateVars = (request, envVars = {}, collectionVariables = {}, proces
         request.data = JSON.parse(parsed);
       } catch (err) {}
     }
+  } else if (request.mode === 'multipartForm') {
+    // make axios work in node using form data
+    // reference: https://github.com/axios/axios/issues/1006#issuecomment-320165427
+    const form = new FormData();
+    forOwn(request.data, (value, name) => {
+      form.append(interpolate(name), interpolate(value));
+    });
+
+    extend(request.headers, form.getHeaders());
+    request.data = form;
   } else {
     request.data = interpolate(request.data);
   }

packages/bruno-electron/src/ipc/network/prepare-request.js

@@ -1,4 +1,4 @@
-const { get, each, filter, forOwn, extend } = require('lodash');
+const { get, each, filter } = require('lodash');
 const decomment = require('decomment');
 const FormData = require('form-data');
 
@@ -146,20 +146,12 @@ const prepareRequest = (request, collectionRoot) => {
   }
 
   if (request.body.mode === 'multipartForm') {
-    const params = {};
     const enabledParams = filter(request.body.multipartForm, (p) => p.enabled);
+
+    const params = {};
     each(enabledParams, (p) => (params[p.name] = p.value));
-    axiosRequest.headers['content-type'] = 'multipart/form-data';
     axiosRequest.data = params;
-
-    // make axios work in node using form data
-    // reference: https://github.com/axios/axios/issues/1006#issuecomment-320165427
-    const form = new FormData();
-    forOwn(axiosRequest.data, (value, key) => {
-      form.append(key, value);
-    });
-    extend(axiosRequest.headers, form.getHeaders());
-    axiosRequest.data = form;
+    axiosRequest.headers['content-type'] = 'multipart/form-data';
   }
 
   if (request.body.mode === 'graphql') {