feat: raw file body uploads (#3827)

raw file body uploads
2026-07-09 06:55:03 +00:00 · 2025-01-17 13:08:27 +05:30
parent 3c8cb702f5
commit ecf883ba0d
26 changed files with 676 additions and 63 deletions
--- a/packages/bruno-app/src/components/FilePickerEditor/index.js
+++ b/packages/bruno-app/src/components/FilePickerEditor/index.js
@@ -6,7 +6,7 @@ import { IconX } from '@tabler/icons';
 import { isWindowsOS } from 'utils/common/platform';
 import slash from 'utils/common/slash';

-const FilePickerEditor = ({ value, onChange, collection }) => {
+const FilePickerEditor = ({ value, onChange, collection, isSingleFilePicker = false}) => {
  value = value || [];
  const dispatch = useDispatch();
  const filenames = value
@@ -20,7 +20,7 @@ const FilePickerEditor = ({ value, onChange, collection }) => {
  const title = filenames.map((v) => `- ${v}`).join('\n');

  const browse = () => {
-    dispatch(browseFiles())
+    dispatch(browseFiles([],['']))
      .then((filePaths) => {
        // If file is in the collection's directory, then we use relative path
        // Otherwise, we use the absolute path
@@ -49,7 +49,7 @@ const FilePickerEditor = ({ value, onChange, collection }) => {
    if (filenames.length == 1) {
      return filenames[0];
    }
-    return filenames.length + ' files selected';
+    return filenames.length + ' file(s) selected';
  };

  return filenames.length > 0 ? (
@@ -66,7 +66,7 @@ const FilePickerEditor = ({ value, onChange, collection }) => {
    </div>
  ) : (
    <button className="btn btn-secondary px-1" style={{ width: '100%' }} onClick={browse}>
-      Select Files
+      {isSingleFilePicker? 'Select File' : 'Select Files'}
    </button>
  );
 };
--- a/packages/bruno-app/src/components/RequestPane/Binary/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Binary/StyledWrapper.js
@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    td {
+      padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(2) {
+        width: 45%;
+      }
+
+      &:nth-child(3) {
+        width: 25%;
+      }
+
+      &:nth-child(4) {
+        width: 70px;
+      }
+    }
+  }
+
+  .btn-add-param {
+    font-size: 0.8125rem;
+  }
+
+  input[type='text'] {
+    width: 100%;
+    border: solid 1px transparent;
+    outline: none !important;
+    color: ${(props) => props.theme.table.input.color};
+    background: transparent;
+
+    &:focus {
+      outline: none !important;
+      border: solid 1px transparent;
+    }
+  }
+
+  input[type='radio'] {
+    cursor: pointer;
+    position: relative;
+    top: 1px;
+  }
+`;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/Binary/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Binary/index.js
@@ -0,0 +1,173 @@
+import React from 'react';
+import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
+import { IconTrash } from '@tabler/icons';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import {
+  addBinaryFile,
+  updateBinaryFile,
+  deleteBinaryFile
+} from 'providers/ReduxStore/slices/collections';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import FilePickerEditor from 'components/FilePickerEditor';
+import SingleLineEditor from 'components/SingleLineEditor/index';
+import { isArray } from 'lodash';
+import path from 'node:path';
+import { useState } from 'react';
+
+const Binary = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const { storedTheme } = useTheme();
+  const params = item.draft ? get(item, 'draft.request.body.binaryFile') : get(item, 'request.body.binaryFile');
+
+  const [enabledFileUid, setEnableFileUid] = useState(params && params.length ? params[0].uid : '');
+
+  const addFile = () => {
+    dispatch(
+      addBinaryFile({
+        itemUid: item.uid,
+        collectionUid: collection.uid,
+        type: 'binaryFile',
+        value: [''],
+      })
+    );
+  };
+
+  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
+  
+  const handleParamChange = (e, _param, type) => {
+
+    const param = cloneDeep(_param);
+
+    switch (type) {
+    
+      case 'value': {
+        param.value = isArray(e.target.value) && e.target.value.length > 0 ? e.target.value : [''];
+        param.name = param.value.length === 0  ? '': path.basename(param.value[0], path.extname(param.value[0]));
+        break;
+      }
+      case 'contentType': {
+        param.contentType = e.target.value;
+        break;
+      }
+      case 'enabled': {
+        param.enabled = e.target.checked;
+
+        setEnableFileUid(param.uid);
+
+        break;
+      }
+    }
+    dispatch(
+      updateBinaryFile({
+        param: param,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  const handleRemoveParams = (param) => {
+    dispatch(
+      deleteBinaryFile({
+        paramUid: param.uid,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="w-full">
+      <table>
+        <thead>
+          <tr>
+            <td><div className="flex items-center justify-center">File</div></td>
+            <td><div className="flex items-center justify-center">Content-Type</div></td>
+            <td><div className="flex items-center justify-center">Enabled</div></td>
+            <td></td>
+          </tr>
+        </thead>
+        <tbody>
+          {params && params.length
+            ? params.map((param, index) => {
+                return (
+                  <tr key={param.uid}>
+                    <td>
+                        <FilePickerEditor
+                          isSingleFilePicker={true}
+                          value={param.value}
+                          onChange={(newValue) =>
+                            handleParamChange(
+                              {
+                                target: {
+                                  value: newValue
+                                }
+                              },
+                              param,
+                              'value'
+                            )
+                          }
+                          collection={collection}
+                        />
+                    </td>
+                    <td>
+                      <SingleLineEditor
+                        className='flex items-center justify-center'
+                        onSave={onSave}
+                        theme={storedTheme}
+                        placeholder="Auto"
+                        value={param.contentType}
+                        onChange={(newValue) =>
+                          handleParamChange(
+                            {
+                              target: {
+                                value: newValue
+                              }
+                            },
+                            param,
+                            'contentType'
+                          )
+                        }
+                        onRun={handleRun}
+                        collection={collection}
+                      />
+                    </td>
+                    <td>
+                      <div className="flex items-center justify-center">
+                        <input
+                          key={param.uid}
+                          type="radio"
+                          name="enabled"
+                          checked={enabledFileUid === param.uid || param.enabled}
+                          tabIndex="-1"
+                          className="mr-1 mousetrap"
+                          onChange={(e) => handleParamChange(e, param, 'enabled')}
+                        />
+                      </div>
+                    </td>
+                    <td>
+                    <div className="flex items-center justify-center">
+                      <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
+                        <IconTrash strokeWidth={1.5} size={20} />
+                      </button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            : null}
+        </tbody>
+      </table>
+      <div>
+        <button className="btn-add-param text-link pr-2 pt-3 select-none" onClick={addFile}>
+          + Add File
+        </button>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default Binary;
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/index.js
@@ -128,6 +128,15 @@ const RequestBodyMode = ({ item, collection }) => {
            SPARQL
          </div>
          <div className="label-item font-medium">Other</div>
+          <div
+            className="dropdown-item"
+            onClick={() => {
+              dropdownTippyRef.current.hide();
+              onModeChange('binaryFile');
+            }}
+          >
+            Binary File
+          </div>
          <div
            className="dropdown-item"
            onClick={() => {
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
@@ -8,6 +8,7 @@ import { useTheme } from 'providers/Theme';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
+import Binary from '../Binary/index';

 const RequestBody = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -62,6 +63,10 @@ const RequestBody = ({ item, collection }) => {
    );
  }

+  if (bodyMode === 'binaryFile') {
+    return <Binary item={item} collection={collection}/>
+  }
+
  if (bodyMode === 'formUrlEncoded') {
    return <FormUrlEncodedParams item={item} collection={collection} />;
  }
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
@@ -759,7 +759,8 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
          xml: null,
          sparql: null,
          multipartForm: null,
-          formUrlEncoded: null
+          formUrlEncoded: null,
+          binaryFile: null
        },
        auth: auth ?? {
          mode: 'none'
@@ -1039,12 +1040,12 @@ export const browseDirectory = () => (dispatch, getState) => {
 };

 export const browseFiles =
-  (filters = []) =>
+  (filters = [], properties = ['multiSelections']) =>
  (dispatch, getState) => {
    const { ipcRenderer } = window;

    return new Promise((resolve, reject) => {
-      ipcRenderer.invoke('renderer:browse-files', filters).then(resolve).catch(reject);
+      ipcRenderer.invoke('renderer:browse-files', undefined, undefined, undefined, filters, properties).then(resolve).catch(reject);
    });
  };

--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
@@ -18,6 +18,8 @@ import {
 import { parsePathParams, parseQueryParams, splitOnFirst, stringifyQueryParams } from 'utils/url';
 import { getDirectoryName, getSubdirectoriesFromRoot, PATH_SEPARATOR } from 'utils/common/platform';
 import toast from 'react-hot-toast';
+import mime from 'mime-types';
+import path from 'node:path';

 const initialState = {
  collections: [],
@@ -863,25 +865,89 @@ export const collectionsSlice = createSlice({
        }
      }
    },
-    moveMultipartFormParam: (state, action) => {
+     moveMultipartFormParam: (state, action) => {
+      // Ensure item.draft is a deep clone of item if not already present
+      if (!item.draft) {
+        item.draft = cloneDeep(item);
+      }
+
+      // Extract payload data
+      const { updateReorderedItem } = action.payload;
+      const params = item.draft.request.body.multipartForm;
+
+      item.draft.request.body.multipartForm = updateReorderedItem.map((uid) => {
+        return params.find((param) => param.uid === uid);
+      });
+    },
+    addBinaryFile: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+
+        if (item && isItemARequest(item)) {
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+          item.draft.request.body.binaryFile = item.draft.request.body.binaryFile || [];
+
+          item.draft.request.body.binaryFile.push({
+            uid: uuid(),
+            type: action.payload.type,
+            name: '',
+            value: [''],
+            contentType: '',
+            enabled: false
+          });
+        }
+      }
+    },
+    updateBinaryFile: (state, action) => {
      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);

      if (collection) {
        const item = findItemInCollection(collection, action.payload.itemUid);

        if (item && isItemARequest(item)) {
-          // Ensure item.draft is a deep clone of item if not already present
          if (!item.draft) {
            item.draft = cloneDeep(item);
          }

-          // Extract payload data
-          const { updateReorderedItem } = action.payload;
-          const params = item.draft.request.body.multipartForm;
-
-          item.draft.request.body.multipartForm = updateReorderedItem.map((uid) => {
-            return params.find((param) => param.uid === uid);
+          item.draft.request.body.binaryFile = item.draft.request.body.binaryFile.map((p) => {
+            p.enabled = false;
+            return p;
          });
+
+          const param = find(item.draft.request.body.binaryFile, (p) => p.uid === action.payload.param.uid);
+
+          if (param) {
+
+            const contentType = mime.contentType(path.extname(action.payload.param.value[0]));
+
+            param.type = action.payload.param.type;
+            param.name = action.payload.param.name;
+            param.value = action.payload.param.value;
+            param.contentType = action.payload.param.contentType || contentType || '';
+            param.enabled = action.payload.param.enabled;
+          }
+        }
+      }
+    },
+    deleteBinaryFile: (state, action) => {
+      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
+
+      if (collection) {
+        const item = findItemInCollection(collection, action.payload.itemUid);
+
+        if (item && isItemARequest(item)) {
+          if (!item.draft) {
+            item.draft = cloneDeep(item);
+          }
+          
+          item.draft.request.body.binaryFile = filter(
+            item.draft.request.body.binaryFile,
+            (p) => p.uid !== action.payload.paramUid
+          );
        }
      }
    },
@@ -941,6 +1007,10 @@ export const collectionsSlice = createSlice({
              item.draft.request.body.sparql = action.payload.content;
              break;
            }
+            case 'binaryFile': {
+              item.draft.request.body.binaryFile = action.payload.content;
+              break;
+            }
            case 'formUrlEncoded': {
              item.draft.request.body.formUrlEncoded = action.payload.content;
              break;
@@ -1933,6 +2003,9 @@ export const {
  addMultipartFormParam,
  updateMultipartFormParam,
  deleteMultipartFormParam,
+  addBinaryFile,
+  updateBinaryFile,
+  deleteBinaryFile,
  moveMultipartFormParam,
  updateRequestAuthMode,
  updateRequestBodyMode,
--- a/packages/bruno-app/src/utils/codegenerator/har.js
+++ b/packages/bruno-app/src/utils/codegenerator/har.js
@@ -14,6 +14,8 @@ const createContentType = (mode) => {
      return 'application/json';
    case 'multipartForm':
      return 'multipart/form-data';
+    case 'binaryFile':
+      return 'application/octet-stream';
    default:
      return '';
  }
@@ -60,26 +62,48 @@ const createPostData = (body, type) => {
  }

  const contentType = createContentType(body.mode);
-  if (body.mode === 'formUrlEncoded' || body.mode === 'multipartForm') {
-    return {
-      mimeType: contentType,
-      params: body[body.mode]
-        .filter((param) => param.enabled)
-        .map((param) => ({
-          name: param.name,
-          value: param.value,
-          ...(param.type === 'file' && { fileName: param.value })
-        }))
-    };
-  } else {
-    return {
-      mimeType: contentType,
-      text: body[body.mode]
-    };
+
+  switch (body.mode) {
+    case 'formUrlEncoded':
+    case 'multipartForm':
+      return {
+        mimeType: contentType,
+        params: body[body.mode]
+          .filter((param) => param.enabled)
+          .map((param) => ({
+            name: param.name,
+            value: param.value,
+            ...(param.type === 'file' && { fileName: param.value })
+          }))
+      };
+    case 'binaryFile':
+      const binary = {
+        mimeType: 'application/octet-stream',
+        // mimeType: body[body.mode].filter((param) => param.enabled)[0].contentType,
+        params: body[body.mode]
+          .filter((param) => param.enabled)
+          .map((param) => ({
+            name: param.name,
+            value: param.value,
+            fileName: param.value
+          }))
+      };
+
+      console.log('curl-binary', binary);
+      return binary;
+    default:
+      return {
+        mimeType: contentType,
+        text: body[body.mode]
+      };
  }
 };

 export const buildHarRequest = ({ request, headers, type }) => {
+
+  console.log('buildHarRequest', request, headers, type);
+
+  console.log('buildHarRequest-postData', createPostData(request.body, type));
  return {
    method: request.method,
    url: encodeURI(request.url),
@@ -89,6 +113,7 @@ export const buildHarRequest = ({ request, headers, type }) => {
    queryString: createQuery(request.params),
    postData: createPostData(request.body, type),
    headersSize: 0,
-    bodySize: 0
+    bodySize: 0,
+    binary: true
  };
 };
--- a/packages/bruno-app/src/utils/collections/export.js
+++ b/packages/bruno-app/src/utils/collections/export.js
@@ -14,6 +14,7 @@ export const deleteUidsInItems = (items) => {
      each(get(item, 'request.vars.assertions'), (a) => delete a.uid);
      each(get(item, 'request.body.multipartForm'), (param) => delete param.uid);
      each(get(item, 'request.body.formUrlEncoded'), (param) => delete param.uid);
+      each(get(item, 'request.body.binaryFile'), (param) => delete param.uid);
    }

    if (item.items && item.items.length) {
--- a/packages/bruno-app/src/utils/collections/index.js
+++ b/packages/bruno-app/src/utils/collections/index.js
@@ -271,6 +271,19 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {}
    });
  };

+  const copyBinaryFileParams = (params = []) => {
+    return map(params, (param) => {
+      return {
+        uid: param.uid,
+        type: param.type,
+        name: param.name,
+        value: param.value,
+        contentType: param.contentType,
+        enabled: param.enabled
+      }
+    });
+  }
+
  const copyItems = (sourceItems, destItems) => {
    each(sourceItems, (si) => {
      if (!isItemAFolder(si) && !isItemARequest(si) && si.type !== 'js') {
@@ -298,7 +311,8 @@ export const transformCollectionToSaveToExportAsFile = (collection, options = {}
            graphql: si.request.body.graphql,
            sparql: si.request.body.sparql,
            formUrlEncoded: copyFormUrlEncodedParams(si.request.body.formUrlEncoded),
-            multipartForm: copyMultipartFormParams(si.request.body.multipartForm)
+            multipartForm: copyMultipartFormParams(si.request.body.multipartForm),
+            binaryFile: copyBinaryFileParams(si.request.body.binaryFile)
          },
          script: si.request.script,
          vars: si.request.vars,
@@ -651,6 +665,10 @@ export const humanizeRequestBodyMode = (mode) => {
      label = 'SPARQL';
      break;
    }
+    case 'binaryFile': {
+      label = 'Binary File';
+      break;
+    }
    case 'formUrlEncoded': {
      label = 'Form URL Encoded';
      break;
@@ -751,6 +769,7 @@ export const refreshUidsInItem = (item) => {
  each(get(item, 'request.params'), (param) => (param.uid = uuid()));
  each(get(item, 'request.body.multipartForm'), (param) => (param.uid = uuid()));
  each(get(item, 'request.body.formUrlEncoded'), (param) => (param.uid = uuid()));
+  each(get(item, 'request.body.binaryFile'), (param) => (param.uid = uuid()));

  return item;
 };
@@ -761,11 +780,13 @@ export const deleteUidsInItem = (item) => {
  const headers = get(item, 'request.headers', []);
  const bodyFormUrlEncoded = get(item, 'request.body.formUrlEncoded', []);
  const bodyMultipartForm = get(item, 'request.body.multipartForm', []);
+  const binaryFile = get(item, 'request.body.binaryFile', []);

  params.forEach((param) => delete param.uid);
  headers.forEach((header) => delete header.uid);
  bodyFormUrlEncoded.forEach((param) => delete param.uid);
  bodyMultipartForm.forEach((param) => delete param.uid);
+  binaryFile.forEach((param) => delete param.uid);

  return item;
 };
--- a/packages/bruno-app/src/utils/curl/curl-to-json.js
+++ b/packages/bruno-app/src/utils/curl/curl-to-json.js
@@ -9,6 +9,7 @@
 import parseCurlCommand from './parse-curl';
 import * as querystring from 'query-string';
 import * as jsesc from 'jsesc';
+import * as path from 'path';

 function getContentType(headers = {}) {
  const contentType = Object.keys(headers).find((key) => key.toLowerCase() === 'content-type');
@@ -99,9 +100,36 @@ function getMultipleDataString(request, parsedQueryString) {
 function getFilesString(request) {
  const data = {};

-  data.files = {};
  data.data = {};

+  if (request.isDataBinary){
+
+    let filePath = ''
+
+    if(request.data.startsWith('@')){
+      filePath = request.data.slice(1);
+    }else{
+      filePath = request.data;
+    }
+
+    const fileName = path.basename(filePath);
+
+    data.data = [
+      {
+        name: repr(fileName),
+        value: [repr(filePath)],
+        enabled: true,
+        contentType: request.headers['Content-Type'],
+        type: 'binaryFile'
+      }
+    ];
+
+    return data;
+
+  }
+
+  data.files = {};
+
  for (const multipartKey in request.multipartUploads) {
    const multipartValue = request.multipartUploads[multipartKey];
    if (multipartValue.startsWith('@')) {
@@ -140,6 +168,7 @@ const curlToJson = (curlCommand) => {
  requestJson.url = request.urlWithoutQuery;
  requestJson.raw_url = request.url;
  requestJson.method = request.method;
+  requestJson.isDataBinary = request.isDataBinary;

  if (request.cookies) {
    const cookies = {};
@@ -163,11 +192,11 @@ const curlToJson = (curlCommand) => {
    requestJson.queries = getQueries(request);
  }

-  if (typeof request.data === 'string' || typeof request.data === 'number') {
-    Object.assign(requestJson, getDataString(request));
-  } else if (request.multipartUploads) {
+  else if (request.multipartUploads || request.isDataBinary) {
    Object.assign(requestJson, getFilesString(request));
-  }
+  } else if (typeof request.data === 'string' || typeof request.data === 'number') {
+    Object.assign(requestJson, getDataString(request));
+  } 

  if (request.insecure) {
    requestJson.insecure = false;
--- a/packages/bruno-app/src/utils/curl/curl-to-json.spec.js
+++ b/packages/bruno-app/src/utils/curl/curl-to-json.spec.js
@@ -86,4 +86,40 @@ describe('curlToJson', () => {
      method: 'get'
    });
  });
+
+  it('should return a parse a curl with a post body with binary file type', () => {
+    const curlCommand = `curl 'https://www.usebruno.com'
+    -H 'Accept: application/json, text/plain, */*'
+    -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8'
+    -H 'Content-Type: application/json;charset=utf-8'
+    -H 'Origin: https://www.usebruno.com'
+    -H 'Referer: https://www.usebruno.com/'
+    --data-binary '@/path/to/file'
+    `;
+
+    const result = curlToJson(curlCommand);
+
+    expect(result).toEqual({
+      url: 'https://www.usebruno.com',
+      raw_url: 'https://www.usebruno.com',
+      method: 'post',
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+        'Accept-Language': 'en-US,en;q=0.9,hi;q=0.8',
+        'Content-Type': 'application/json;charset=utf-8',
+        Origin: 'https://www.usebruno.com',
+        Referer: 'https://www.usebruno.com/'
+      },
+      isDataBinary: true,
+      data: [
+        {
+          name: 'file',
+          value: ['/path/to/file'],
+          enabled: true,
+          contentType: 'application/json;charset=utf-8',
+          type: 'binaryFile'
+        }
+      ]
+    });
+  });
 });
--- a/packages/bruno-app/src/utils/curl/index.js
+++ b/packages/bruno-app/src/utils/curl/index.js
@@ -50,14 +50,18 @@ export const getRequestFromCurlCommand = (curlCommand, requestType = 'http-reque
      sparql: null,
      multipartForm: null,
      formUrlEncoded: null,
-      graphql: null
+      graphql: null,
+      binaryFile: null
    };

    if (parsedBody && contentType && typeof contentType === 'string') {
      if (requestType === 'graphql-request' && (contentType.includes('application/json') || contentType.includes('application/graphql'))) {
        body.mode = 'graphql';
        body.graphql = parseGraphQL(parsedBody);
-      } else if (contentType.includes('application/json')) {
+      } else if (requestType === 'http-request' && request.isDataBinary) {
+        body.mode = 'binaryFile';
+        body.binaryFile = parsedBody;
+      }else if (contentType.includes('application/json')) {
        body.mode = 'json';
        body.json = convertToCodeMirrorJson(parsedBody);
      } else if (contentType.includes('xml')) {
--- a/packages/bruno-app/src/utils/importers/common.js
+++ b/packages/bruno-app/src/utils/importers/common.js
@@ -35,6 +35,7 @@ export const updateUidsInCollection = (_collection) => {
      each(get(item, 'request.assertions'), (a) => (a.uid = uuid()));
      each(get(item, 'request.body.multipartForm'), (param) => (param.uid = uuid()));
      each(get(item, 'request.body.formUrlEncoded'), (param) => (param.uid = uuid()));
+      each(get(item, 'request.body.binaryFile'), (param) => (param.uid = uuid()));

      if (item.items && item.items.length) {
        updateItemUids(item.items);