feature: Multi-part requests: user should be able to set content-type for each part in a multi-part request. #1602

packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js

@@ -24,7 +24,7 @@ const Wrapper = styled.div`
         width: 30%;
       }
 
-      &:nth-child(3) {
+      &:nth-child(4) {
         width: 70px;
       }
     }

packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js

@@ -52,6 +52,10 @@ const MultipartFormParams = ({ item, collection }) => {
         param.value = e.target.value;
         break;
       }
+      case 'contentType': {
+        param.contentType = e.target.value;
+        break;
+      }
       case 'enabled': {
         param.enabled = e.target.checked;
         break;
@@ -83,6 +87,7 @@ const MultipartFormParams = ({ item, collection }) => {
           <tr>
             <td>Key</td>
             <td>Value</td>
+            <td>Content-Type</td>
             <td></td>
           </tr>
         </thead>
@@ -142,6 +147,26 @@ const MultipartFormParams = ({ item, collection }) => {
                         />
                       )}
                     </td>
+                    <td>
+                      <MultiLineEditor
+                        onSave={onSave}
+                        theme={storedTheme}
+                        value={param.contentType}
+                        onChange={(newValue) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'contentType'
+                          )
+                        }
+                        onRun={handleRun}
+                        collection={collection}
+                      />
+                    </td>
                     <td>
                       <div className="flex items-center">
                         <input

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -625,6 +625,7 @@ export const collectionsSlice = createSlice({
             name: '',
             value: '',
             description: '',
+            contentType: '',
             enabled: true
           });
         }
@@ -646,6 +647,7 @@ export const collectionsSlice = createSlice({
             param.name = action.payload.param.name;
             param.value = action.payload.param.value;
             param.description = action.payload.param.description;
+            param.contentType = action.payload.param.contentType;
             param.enabled = action.payload.param.enabled;
           }
         }

packages/bruno-cli/src/runner/prepare-request.js

@@ -1,7 +1,38 @@
-const { get, each, filter } = require('lodash');
-const fs = require('fs');
-var JSONbig = require('json-bigint');
+const { get, each, filter, extend } = require('lodash');
 const decomment = require('decomment');
+var JSONbig = require('json-bigint');
+const FormData = require('form-data');
+const fs = require('fs');
+const path = require('path');
+
+const parseFormData = (datas, collectionPath) => {
+  // make axios work in node using form data
+  // reference: https://github.com/axios/axios/issues/1006#issuecomment-320165427
+  const form = new FormData();
+  datas.forEach((item) => {
+    const value = item.value;
+    const name = item.name;
+    let options = {};
+    if (item.contentType) {
+      options.contentType = item.contentType;
+    }
+    if (item.type === 'file') {
+      const filePaths = value || [];
+      filePaths.forEach((filePath) => {
+        let trimmedFilePath = filePath.trim();
+
+        if (!path.isAbsolute(trimmedFilePath)) {
+          trimmedFilePath = path.join(collectionPath, trimmedFilePath);
+        }
+        options.filename = path.basename(trimmedFilePath);
+        form.append(name, fs.createReadStream(trimmedFilePath), options);
+      });
+    } else {
+      form.append(name, value, options);
+    }
+  });
+  return form;
+};
 
 const prepareRequest = (request, collectionRoot) => {
   const headers = {};
@@ -124,17 +155,11 @@ const prepareRequest = (request, collectionRoot) => {
   }
 
   if (request.body.mode === 'multipartForm') {
-    const params = {};
     const enabledParams = filter(request.body.multipartForm, (p) => p.enabled);
-    each(enabledParams, (p) => {
-      if (p.type === 'file') {
-        params[p.name] = p.value.map((path) => fs.createReadStream(path));
-      } else {
-        params[p.name] = p.value;
-      }
-    });
-    axiosRequest.headers['content-type'] = 'multipart/form-data';
-    axiosRequest.data = params;
+    const collectionPath = process.cwd();
+    const form = parseFormData(enabledParams, collectionPath);
+    extend(axiosRequest.headers, form.getHeaders());
+    axiosRequest.data = form;
   }
 
   if (request.body.mode === 'graphql') {

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

@@ -12,6 +12,10 @@ const parseFormData = (datas, collectionPath) => {
   datas.forEach((item) => {
     const value = item.value;
     const name = item.name;
+    let options = {};
+    if (item.contentType) {
+      options.contentType = item.contentType;
+    }
     if (item.type === 'file') {
       const filePaths = value || [];
       filePaths.forEach((filePath) => {
@@ -20,11 +24,11 @@ const parseFormData = (datas, collectionPath) => {
         if (!path.isAbsolute(trimmedFilePath)) {
           trimmedFilePath = path.join(collectionPath, trimmedFilePath);
         }
-
-        form.append(name, fs.createReadStream(trimmedFilePath), path.basename(trimmedFilePath));
+        options.filename = path.basename(trimmedFilePath);
+        form.append(name, fs.createReadStream(trimmedFilePath), options);
       });
     } else {
-      form.append(name, value);
+      form.append(name, value, options);
     }
   });
   return form;

packages/bruno-lang/v2/src/bruToJson.js

@@ -133,16 +133,31 @@ const mapPairListToKeyValPairs = (pairList = [], parseEnabled = true) => {
   });
 };
 
+const multipartExtractContentType = (pair) => {
+  if (_.isString(pair.value)) {
+    const match = pair.value.match(/^(.*?)\s*\(Content-Type=(.*?)\)\s*$/);
+    if (match != null && match.length > 2) {
+      pair.value = match[1];
+      pair.contentType = match[2];
+    } else {
+      pair.contentType = '';
+    }
+  }
+};
+
 const mapPairListToKeyValPairsMultipart = (pairList = [], parseEnabled = true) => {
   const pairs = mapPairListToKeyValPairs(pairList, parseEnabled);
 
   return pairs.map((pair) => {
     pair.type = 'text';
+    multipartExtractContentType(pair);
+
     if (pair.value.startsWith('@file(') && pair.value.endsWith(')')) {
       let filestr = pair.value.replace(/^@file\(/, '').replace(/\)$/, '');
       pair.type = 'file';
       pair.value = filestr.split('|');
     }
+
     return pair;
   });
 };

packages/bruno-lang/v2/src/jsonToBru.js

@@ -247,16 +247,18 @@ ${indentString(body.sparql)}
         multipartForms
           .map((item) => {
             const enabled = item.enabled ? '' : '~';
+            const contentType =
+              item.contentType && item.contentType !== '' ? ' (Content-Type=' + item.contentType + ')' : '';
 
             if (item.type === 'text') {
-              return `${enabled}${item.name}: ${item.value}`;
+              return `${enabled}${item.name}: ${item.value}${contentType}`;
             }
 
             if (item.type === 'file') {
               let filepaths = item.value || [];
               let filestr = filepaths.join('|');
               const value = `@file(${filestr})`;
-              return `${enabled}${item.name}: ${value}`;
+              return `${enabled}${item.name}: ${value}${contentType}`;
             }
           })
           .join('\n')

packages/bruno-lang/v2/tests/fixtures/request.json

@@ -103,18 +103,21 @@
     ],
     "multipartForm": [
       {
+        "contentType": "",
         "name": "apikey",
         "value": "secret",
         "enabled": true,
         "type": "text"
       },
       {
+        "contentType": "",
         "name": "numbers",
         "value": "+91998877665",
         "enabled": true,
         "type": "text"
       },
       {
+        "contentType": "",
         "name": "message",
         "value": "hello",
         "enabled": false,

packages/bruno-schema/src/collections/index.js

@@ -68,6 +68,7 @@ const multipartFormSchema = Yup.object({
     otherwise: Yup.string().nullable()
   }),
   description: Yup.string().nullable(),
+  contentType: Yup.string().nullable(),
   enabled: Yup.boolean()
 })
   .noUnknown(true)

packages/bruno-tests/collection/multipart/mixed-content-types.bru

@@ -0,0 +1,39 @@
+meta {
+  name: mixed-content-types
+  type: http
+  seq: 1
+}
+
+post {
+  url: {{host}}/api/multipart/mixed-content-types
+  body: multipartForm
+  auth: none
+}
+
+body:multipart-form {
+  param1: test
+  param2: {"test":"i am json"} (Content-Type=application/json)
+  param3: @file(multipart/small.png)
+}
+
+tests {
+  test("Status code is 200", function () {
+    expect(res.getStatus()).to.equal(200);
+  });
+  test("param1 has no content-type", function () {
+    var param1 = res.body.find(p=>p.name === 'param1')
+    expect(param1).to.be.an('object');
+    expect(param1.contentType).to.be.undefined;
+  });
+  test("param2 has content-type application/json", function () {
+    var param2 = res.body.find(p=>p.name === 'param2')
+    expect(param2).to.be.an('object');
+    expect(param2.contentType).to.equals('application/json');
+  });
+  test("param3 has content-type image/png", function () {
+    var param3 = res.body.find(p=>p.name === 'param3')
+    expect(param3).to.be.an('object');
+    expect(param3.contentType).to.equals('image/png');
+  });
+  
+}

packages/bruno-tests/src/index.js

@@ -2,23 +2,25 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const xmlparser = require('express-xml-bodyparser');
 const cors = require('cors');
-const multer = require('multer');
+const formDataParser = require('./multipart/form-data-parser');
 
 const app = new express();
 const port = process.env.PORT || 8080;
-const upload = multer();
 
 app.use(cors());
 app.use(xmlparser());
 app.use(bodyParser.text());
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
+formDataParser.init(app, express);
 
 const authRouter = require('./auth');
 const echoRouter = require('./echo');
+const multipartRouter = require('./multipart');
 
 app.use('/api/auth', authRouter);
 app.use('/api/echo', echoRouter);
+app.use('/api/multipart', multipartRouter);
 
 app.get('/ping', function (req, res) {
   return res.send('pong');
@@ -32,10 +34,6 @@ app.get('/query', function (req, res) {
   return res.json(req.query);
 });
 
-app.post('/echo/multipartForm', upload.none(), function (req, res) {
-  return res.json(req.body);
-});
-
 app.get('/redirect-to-ping', function (req, res) {
   return res.redirect('/ping');
 });

packages/bruno-tests/src/multipart/form-data-parser.js

@@ -0,0 +1,58 @@
+/**
+ * Instead of using multer for example to parse the multipart form data, we build our own parser
+ * so that we can verify the content type are set correctly by bruno (for example application/json for json content)
+ */
+
+const extractParam = function (param, str, delimiter, quote, endDelimiter) {
+  let regex = new RegExp(`${param}${delimiter}\\s*${quote}(.*?)${quote}${endDelimiter}`);
+  const found = str.match(regex);
+  if (found != null && found.length > 1) {
+    return found[1];
+  } else {
+    return null;
+  }
+};
+
+const init = function (app, express) {
+  app.use(express.raw({ type: 'multipart/form-data' }));
+};
+
+const parsePart = function (part) {
+  let result = {};
+  const name = extractParam('name', part, '=', '"', '');
+  if (name) {
+    result.name = name;
+  }
+  const filename = extractParam('filename', part, '=', '"', '');
+  if (filename) {
+    result.filename = filename;
+  }
+  const contentType = extractParam('Content-Type', part, ':', '', ';');
+  if (contentType) {
+    result.contentType = contentType;
+  }
+  if (!filename) {
+    result.value = part.substring(part.indexOf('value=') + 'value='.length);
+  }
+  if (contentType === 'application/json') {
+    result.value = JSON.parse(result.value);
+  }
+  return result;
+};
+
+const parse = function (req) {
+  const BOUNDARY = 'boundary=';
+  const contentType = req.headers['content-type'];
+  const boundary = '--' + contentType.substring(contentType.indexOf(BOUNDARY) + BOUNDARY.length);
+  const rawBody = req.body.toString();
+  let parts = rawBody.split(boundary).filter((part) => part.length > 0);
+  parts = parts.map((part) => part.trim('\r\n'));
+  parts = parts.filter((part) => part != '--');
+  parts = parts.map((part) => part.replace('\r\n\r\n', ';value='));
+  parts = parts.map((part) => part.replace('\r\n', ';'));
+  parts = parts.map((part) => parsePart(part));
+  return parts;
+};
+
+module.exports.parse = parse;
+module.exports.init = init;

packages/bruno-tests/src/multipart/index.js

@@ -0,0 +1,10 @@
+const express = require('express');
+const router = express.Router();
+const formDataParser = require('./form-data-parser');
+
+router.post('/mixed-content-types', (req, res) => {
+  const parts = formDataParser.parse(req);
+  return res.json(parts);
+});
+
+module.exports = router;