Improve pr #2755

packages/bruno-app/src/components/RawFilePickerEditor/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import path from 'path';
+import { useDispatch } from 'react-redux';
+import { browseFile } from 'providers/ReduxStore/slices/collections/actions';
+import { IconX } from '@tabler/icons';
+import { isWindowsOS } from 'utils/common/platform';
+import slash from 'utils/common/slash';
+
+const RawFilePickerEditor = ({ value, onChange, collection }) => {
+  value = value || '';
+  const dispatch = useDispatch();
+  const separator = isWindowsOS() ? '\\' : '/';
+  const filename = value != '' ? value.split(separator).pop() : value;
+  const title = `- ${filename}`;
+
+  const browse = () => {
+    dispatch(browseFile())
+      .then((filePath) => {
+        const collectionDir = collection.pathname;
+
+        if (typeof filePath === 'string') {
+          filePath = filePath.startsWith(collectionDir)
+            ? path.relative(slash(collectionDir), slash(filePath))
+            : filePath;
+
+          onChange(filePath);
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  const clear = () => {
+    onChange(null);
+  };
+
+  return filename.length > 0 ? (
+    <div className="btn btn-secondary px-1 font-normal w-full text-ellipsis overflow-x-hidden" title={title}>
+      <button className="align-middle" onClick={clear}>
+        <IconX size={18} />
+      </button>
+      &nbsp;
+      {filename}
+    </div>
+  ) : (
+    <button className="btn btn-secondary px-1 w-full" onClick={browse}>
+      Select File
+    </button>
+  );
+};
+
+export default RawFilePickerEditor;

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+    .btn {
+        padding: 2% 0%;
+        font-size: 125%;
+    }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
+import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
+import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
+import StyledWrapper from './StyledWrapper';
+import RawFilePickerEditor from 'components/RawFilePickerEditor';
+import { updateRequestBody } from 'providers/ReduxStore/slices/collections/index';
+
+const RawFileParams = ({ item, collection }) => {
+  const dispatch = useDispatch();
+  const fileName = item.draft ? get(item, 'draft.request.body.rawFile') : get(item, 'request.body.rawFile') || [];
+
+  const handleFileChange = (e) => {
+    dispatch(
+      updateRequestBody({
+        content: e.target.rawFilePath,
+        itemUid: item.uid,
+        collectionUid: collection.uid
+      })
+    );
+  };
+
+  return (
+    <StyledWrapper className="w-full">
+      <RawFilePickerEditor
+        value={fileName ? fileName : null}
+        onChange={(rawFilePath) =>
+          handleFileChange({
+            target: {
+              rawFilePath,
+            }
+          })
+        }
+        collection={collection}
+      />
+    </StyledWrapper>
+  );
+};
+export default RawFileParams;

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('rawFile');
+            }}
+          >
+            Raw File
+          </div>
           <div
             className="dropdown-item"
             onClick={() => {

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

@@ -3,6 +3,7 @@ import get from 'lodash/get';
 import CodeEditor from 'components/CodeEditor';
 import FormUrlEncodedParams from 'components/RequestPane/FormUrlEncodedParams';
 import MultipartFormParams from 'components/RequestPane/MultipartFormParams';
+import RawFileParams from 'components/RequestPane/RawFileParams';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTheme } from 'providers/Theme';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
@@ -69,6 +70,10 @@ const RequestBody = ({ item, collection }) => {
     return <MultipartFormParams item={item} collection={collection} />;
   }
 
+  if (bodyMode === 'rawFile') {
+    return <RawFileParams item={item} collection={collection} />;
+  }
+
   return <StyledWrapper className="w-full">No Body</StyledWrapper>;
 };
 export default RequestBody;

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,
+          rawFile: null
         },
         auth: auth ?? {
           mode: 'none'
@@ -1048,6 +1049,16 @@ export const browseFiles =
     });
   };
 
+  export const browseFile =
+  (filters = []) =>
+  (dispatch, getState) => {
+    const { ipcRenderer } = window;
+
+    return new Promise((resolve, reject) => {
+      ipcRenderer.invoke('renderer:browse-file', filters).then(resolve).catch(reject);
+    });
+  };
+
 export const updateBrunoConfig = (brunoConfig, collectionUid) => (dispatch, getState) => {
   const state = getState();
 

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

@@ -874,6 +874,10 @@ export const collectionsSlice = createSlice({
               item.draft.request.body.multipartForm = action.payload.content;
               break;
             }
+            case 'rawFile': {
+              item.draft.request.body.rawFile = action.payload.content;
+              break;
+            }
           }
         }
       }

packages/bruno-app/src/utils/collections/index.js

@@ -298,7 +298,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),
+            rawFile: si.request.body.rawFile
           },
           script: si.request.script,
           vars: si.request.vars,
@@ -652,6 +653,10 @@ export const humanizeRequestBodyMode = (mode) => {
       label = 'Multipart Form';
       break;
     }
+    case 'rawFile': {
+      label = 'Raw File';
+      break;
+    }
   }
 
   return label;

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

@@ -139,6 +139,16 @@ const prepareRequest = (item = {}, collection = {}) => {
     axiosRequest.data = enabledParams;
   }
 
+  if(request.body.mode === 'rawFile') {
+    if (request.body.rawFile) {
+      axiosRequest.data = fs.readFileSync(request.body.rawFile);
+      fileLength = axiosRequest.data.length;
+      axiosRequest.headers['content-length'] = fileLength;
+    } else {
+      axiosRequest.data = null;
+    }
+  }
+
   if (request.body.mode === 'graphql') {
     const graphqlQuery = {
       query: get(request, 'body.graphql.query'),

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

@@ -13,6 +13,7 @@ const {
   isDirectory,
   browseDirectory,
   browseFiles,
+  browseFile,
   createDirectory,
   searchForBruFiles,
   sanitizeDirectoryName,
@@ -64,6 +65,17 @@ const registerRendererEventHandlers = (mainWindow, watcher, lastOpenedCollection
     }
   });
 
+  // browse directory for one file
+  ipcMain.handle('renderer:browse-file', async (event, pathname, request, filters) => {
+    try {
+      const filePath = await browseFile(mainWindow, filters);
+
+      return filePath;
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  });
+
   // create collection
   ipcMain.handle(
     'renderer:create-collection',

packages/bruno-electron/src/ipc/network/index.js

@@ -28,7 +28,7 @@ const { makeAxiosInstance } = require('./axios-instance');
 const { addAwsV4Interceptor, resolveAwsV4Credentials } = require('./awsv4auth-helper');
 const { addDigestInterceptor } = require('./digestauth-helper');
 const { shouldUseProxy, PatchedHttpsProxyAgent } = require('../../utils/proxy-util');
-const { chooseFileToSave, writeBinaryFile, writeFile } = require('../../utils/filesystem');
+const { chooseFileToSave, writeBinaryFile, writeFile, readFileStream, getFileSize } = require('../../utils/filesystem');
 const { getCookieStringForUrl, addCookieToJar, getDomainsWithCookies } = require('../../utils/cookies');
 const {
   resolveOAuth2AuthorizationCodeAccessToken,
@@ -41,6 +41,8 @@ const FormData = require('form-data');
 const { createFormData } = require('../../utils/form-data');
 const { findItemInCollectionByPathname } = require('../../utils/collection');
 
+const GENERIC_FILE_CONTENT_TYPE = "application/octet-stream";
+
 const safeStringifyJSON = (data) => {
   try {
     return JSON.stringify(data);
@@ -49,6 +51,7 @@ const safeStringifyJSON = (data) => {
   }
 };
 
+
 const safeParseJSON = (data) => {
   try {
     return JSON.parse(data);
@@ -452,6 +455,22 @@ const registerNetworkIpc = (mainWindow) => {
       }
     }
 
+    if (request.headers['content-type'] === GENERIC_FILE_CONTENT_TYPE) {
+      if (!(request.data instanceof Buffer)) {
+        const rawFilePath = request.data;
+
+        try {
+          request.data = await readFileStream(rawFilePath);
+          const newContentType = mime.lookup(rawFilePath) || GENERIC_FILE_CONTENT_TYPE;
+          const fileSize = await getFileSize(rawFilePath);
+
+          extend(request.headers, { 'content-type': newContentType, 'content-length': fileSize });
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    }
+
     return scriptResult;
   };
 

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

@@ -3,6 +3,11 @@ const decomment = require('decomment');
 const crypto = require('node:crypto');
 const { getTreePathFromCollectionToItem, mergeHeaders, mergeScripts, mergeVars } = require('../../utils/collection');
 const { buildFormUrlEncodedPayload, createFormData } = require('../../utils/form-data');
+const { readFile } = require('../../utils/filesystem');
+const { lookup } = require("mime-types")
+
+const GENERIC_FILE_CONTENT_TYPE = "application/octet-stream";
+
 
 const setAuthHeaders = (axiosRequest, request, collectionRoot) => {
   const collectionAuth = get(collectionRoot, 'request.auth');
@@ -252,6 +257,14 @@ const prepareRequest = (item, collection) => {
     axiosRequest.data = enabledParams;
   }
 
+  if(request.body.mode === 'rawFile') {
+    if (!contentTypeDefined){
+      axiosRequest.headers["content-type"] = GENERIC_FILE_CONTENT_TYPE;
+    };
+
+    axiosRequest.data = request.body.rawFile;
+  }
+
   if (request.body.mode === 'graphql') {
     const graphqlQuery = {
       query: get(request, 'body.graphql.query'),

packages/bruno-electron/src/utils/filesystem.js

@@ -134,6 +134,20 @@ const browseFiles = async (win, filters) => {
   return filePaths.map((path) => normalizeAndResolvePath(path)).filter((path) => isFile(path));
 };
 
+const browseFile = async (win, filters) => {
+  const { filePaths } = await dialog.showOpenDialog(win, {
+    properties: ['openFile'],
+    filters
+  });
+
+  if (!filePaths || !filePaths[0]) {
+    return false;
+  }
+
+  const resolvedPath = normalizeAndResolvePath(filePaths[0]);
+  return isFile(resolvedPath) ? resolvedPath : false;
+}
+
 const chooseFileToSave = async (win, preferredFileName = '') => {
   const { filePath } = await dialog.showSaveDialog(win, {
     defaultPath: preferredFileName
@@ -211,6 +225,35 @@ const safeToRename = (oldPath, newPath) => {
   }
 };
 
+const readFileStream = (path) => {
+  return new Promise((resolve, reject) => {
+    const stream = fs.createReadStream(path);
+    let data = '';
+
+    stream.on('data', chunk => {
+      data += chunk;
+    });
+
+    stream.on('end', () => {
+      resolve(data);
+    });
+
+    stream.on('error', err => {
+      console.error("Error while reading the file", err);
+      reject(err);
+    });
+  });
+}
+
+const getFileSize = async (path) => {
+  try {
+    return stats = (await fs.stat(path)).size
+  } catch (err) {
+    console.log("Error while trying to get the file size", err);
+    throw err;
+  }
+}
+
 module.exports = {
   isValidPathname,
   exists,
@@ -227,6 +270,7 @@ module.exports = {
   createDirectory,
   browseDirectory,
   browseFiles,
+  browseFile,
   chooseFileToSave,
   searchForFiles,
   searchForBruFiles,
@@ -235,5 +279,7 @@ module.exports = {
   isWindowsOS,
   safeToRename,
   isValidFilename,
-  hasSubDirectories
+  hasSubDirectories,
+  readFileStream,
+  getFileSize
 };