diff --git a/packages/bruno-app/src/components/FilePickerEditor/index.js b/packages/bruno-app/src/components/FilePickerEditor/index.js
index a8b33c653..90e4a79e3 100644
--- a/packages/bruno-app/src/components/FilePickerEditor/index.js
+++ b/packages/bruno-app/src/components/FilePickerEditor/index.js
@@ -1,15 +1,22 @@
import React from 'react';
+import path from 'path';
import { useDispatch } from 'react-redux';
import { browseFiles } from 'providers/ReduxStore/slices/collections/actions';
import { IconX } from '@tabler/icons';
+import { isWindowsOS } from 'utils/common/platform';
const FilePickerEditor = ({ value, onChange, collection }) => {
+ value = value || [];
const dispatch = useDispatch();
- const filnames = value
- .split('|')
+ const filenames = value
.filter((v) => v != null && v != '')
- .map((v) => v.split('\\').pop());
- const title = filnames.map((v) => `- ${v}`).join('\n');
+ .map((v) => {
+ const separator = isWindowsOS() ? '\\' : '/';
+ return v.split(separator).pop();
+ });
+
+ // title is shown when hovering over the button
+ const title = filenames.map((v) => `- ${v}`).join('\n');
const browse = () => {
dispatch(browseFiles())
@@ -20,13 +27,13 @@ const FilePickerEditor = ({ value, onChange, collection }) => {
const collectionDir = collection.pathname;
if (filePath.startsWith(collectionDir)) {
- return filePath.substring(collectionDir.length + 1);
+ return path.relative(collectionDir, filePath);
}
return filePath;
});
- onChange(filePaths.join('|'));
+ onChange(filePaths);
})
.catch((error) => {
console.error(error);
@@ -37,14 +44,14 @@ const FilePickerEditor = ({ value, onChange, collection }) => {
onChange('');
};
- const renderButtonText = (filnames) => {
- if (filnames.length == 1) {
- return filnames[0];
+ const renderButtonText = (filenames) => {
+ if (filenames.length == 1) {
+ return filenames[0];
}
- return filnames.length + ' files selected';
+ return filenames.length + ' files selected';
};
- return filnames.length > 0 ? (
+ return filenames.length > 0 ? (