Added logic to help with requests of raw files and got button for selecting a file to display.

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

@@ -3,7 +3,7 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-
+import { updateRawFile } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import FilePickerEditor from 'components/FilePickerEditor';
@@ -11,10 +11,36 @@ import FilePickerEditor from 'components/FilePickerEditor';
 const RawFileParams = ({ item, collection }) => {
     const dispatch = useDispatch();
     const { storedTheme } = useTheme();
+    const fileName = item.draft ? get(item, 'draft.request.body.rawFile') : get(item, 'request.body.rawFile') || [];
+
+    const handleFileChange = (e, __filename) => {
+        const fileName = cloneDeep(__filename);
+        fileName.value = e.target.value;
+
+        dispatch(
+            updateRawFile({
+                param: fileName,
+                itemUid: item.uid,
+                collectionUid: collection.uid
+            })
+        );
+    };
 
     return (
         <StyledWrapper>
-
+            <FilePickerEditor
+                value={ fileName ? fileName.value : null }
+                onChange={(newValue) =>
+                    handleFileChange(
+                        {
+                            target: {
+                                value: newValue
+                            }
+                        },
+                        fileName
+                    )
+                }
+                collection={collection} />
         </StyledWrapper>
     );
 };

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

@@ -731,7 +731,8 @@ export const newHttpRequest = (params) => (dispatch, getState) => {
           xml: null,
           sparql: null,
           multipartForm: null,
-          formUrlEncoded: null
+          formUrlEncoded: null,
+          rawFile: null
         }
       }
     };

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

@@ -762,6 +762,23 @@ export const collectionsSlice = createSlice({
         }
       }
     },
+    updateRawFile: (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);
+          }
+          const param = find(item.draft.request.body.rawFile, (p) => p.uid === action.payload.param.uid);
+          if (param) {
+            param.value = action.payload.param.value;
+          }
+        }
+      }
+    },
     updateRequestAuthMode: (state, action) => {
       const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
 
@@ -1661,6 +1678,7 @@ export const {
   addMultipartFormParam,
   updateMultipartFormParam,
   deleteMultipartFormParam,
+  updateRawFile,
   updateRequestAuthMode,
   updateRequestBodyMode,
   updateRequestBody,

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

@@ -697,6 +697,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.rawFile'), (param) => (param.uid = uuid()));
 
   return item;
 };

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

@@ -133,6 +133,16 @@ const prepareRequest = (request, collectionRoot) => {
     axiosRequest.data = params;
   }
 
+  if(request.body.mode === 'rawFile') {
+    if (request.body.rawFile.value) {
+      axiosRequest.data = fs.readFileSync(request.body.rawFile.value);
+      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'),