diff --git a/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/DirectoryTreePopup.tsx b/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/DirectoryTreePopup.tsx
new file mode 100644
index 0000000000..d09612f641
--- /dev/null
+++ b/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/DirectoryTreePopup.tsx
@@ -0,0 +1,97 @@
+import React, {
+    useCallback,
+    useEffect,
+    useState,
+} from "react";
+
+import {Tree} from "antd";
+import type {TreeDataNode} from "antd/es";
+import type {TreeProps} from "antd/es/tree";
+
+import styles from "./index.module.css";
+import {getListHeight} from "./utils";
+
+
+const {DirectoryTree} = Tree;
+
+
+interface DirectoryTreePopupProps {
+    checkedKeys: string[];
+    expandedKeys: string[];
+    treeData: TreeDataNode[];
+    onCheck: (keys: string[]) => void;
+    onExpand: (keys: string[]) => void;
+    onLoadData: (path: string) => Promise<void>;
+}
+
+/**
+ * Renders a popup component containing a DirectoryTree for path selection.
+ *
+ * @param props
+ * @param props.checkedKeys
+ * @param props.expandedKeys
+ * @param props.treeData
+ * @param props.onCheck
+ * @param props.onExpand
+ * @param props.onLoadData
+ * @return
+ */
+const DirectoryTreePopup = ({
+    checkedKeys,
+    expandedKeys,
+    treeData,
+    onCheck,
+    onExpand,
+    onLoadData,
+}: DirectoryTreePopupProps) => {
+    const [height, setHeight] = useState<number>(getListHeight);
+
+    const handleCheck: TreeProps["onCheck"] = useCallback((
+        checked: React.Key[] | {checked: React.Key[]; halfChecked: React.Key[]}
+    ) => {
+        const keys = Array.isArray(checked) ?
+            checked :
+            checked.checked;
+
+        onCheck(keys as string[]);
+    }, [onCheck]);
+
+    const handleExpand = useCallback((keys: React.Key[]) => {
+        onExpand(keys as string[]);
+    }, [onExpand]);
+
+    const handleLoadData = useCallback(async (node: TreeDataNode) => {
+        await onLoadData(node.key as string);
+    }, [onLoadData]);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setHeight(getListHeight());
+        };
+
+        window.addEventListener("resize", handleResize);
+
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+
+    return (
+        <div
+            className={styles["directoryTreePopup"]}
+            style={{height: height, overflow: "auto"}}
+        >
+            <DirectoryTree
+                checkable={true}
+                checkedKeys={checkedKeys}
+                expandedKeys={expandedKeys}
+                loadData={handleLoadData}
+                treeData={treeData}
+                onCheck={handleCheck}
+                onExpand={handleExpand}/>
+        </div>
+    );
+};
+
+
+export default DirectoryTreePopup;
diff --git a/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/DirectoryTreeSelect.tsx b/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/DirectoryTreeSelect.tsx
new file mode 100644
index 0000000000..4655b7e61f
--- /dev/null
+++ b/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/DirectoryTreeSelect.tsx
@@ -0,0 +1,107 @@
+import {
+    useCallback,
+    useMemo,
+} from "react";
+
+import {Select} from "antd";
+import type {TreeDataNode} from "antd/es";
+
+import DirectoryTreePopup from "./DirectoryTreePopup";
+import {TreeNode} from "./typings";
+import {
+    filterToParents,
+    flatToHierarchy,
+    removeWithDescendants,
+} from "./utils";
+
+
+interface DirectoryTreeSelectProps {
+    checkedKeys: string[];
+    expandedKeys: string[];
+    treeData: TreeNode[];
+    onCheck: (keys: string[]) => void;
+    onExpand: (keys: string[]) => void;
+    onLoadData: (path: string) => Promise<void>;
+}
+
+/**
+ * Renders a select component that uses DirectoryTree for the dropdown. Provides folder/file
+ * icons and intuitive directory navigation.
+ *
+ * @param props
+ * @param props.checkedKeys
+ * @param props.expandedKeys
+ * @param props.treeData
+ * @param props.onCheck
+ * @param props.onExpand
+ * @param props.onLoadData
+ * @return
+ */
+const DirectoryTreeSelect = ({
+    checkedKeys,
+    expandedKeys,
+    treeData,
+    onCheck,
+    onExpand,
+    onLoadData,
+}: DirectoryTreeSelectProps) => {
+    const hierarchicalTreeData: TreeDataNode[] = useMemo(
+        () => flatToHierarchy(treeData),
+        [treeData]
+    );
+    const selectOptions = useMemo(
+        () => treeData.map((node) => ({label: node.value, value: node.value})),
+        [treeData]
+    );
+    const displayValue = useMemo(
+        () => filterToParents(treeData, checkedKeys),
+        [
+            checkedKeys,
+            treeData,
+        ]
+    );
+
+    const handleClear = useCallback(() => {
+        onCheck([]);
+    }, [onCheck]);
+
+    const handleDeselect = useCallback((value: string) => {
+        onCheck(removeWithDescendants(treeData, checkedKeys, value));
+    }, [
+        checkedKeys,
+        onCheck,
+        treeData,
+    ]);
+
+    const renderDropdown = useCallback(() => (
+        <DirectoryTreePopup
+            checkedKeys={checkedKeys}
+            expandedKeys={expandedKeys}
+            treeData={hierarchicalTreeData}
+            onCheck={onCheck}
+            onExpand={onExpand}
+            onLoadData={onLoadData}/>
+    ), [
+        checkedKeys,
+        expandedKeys,
+        hierarchicalTreeData,
+        onCheck,
+        onExpand,
+        onLoadData,
+    ]);
+
+    return (
+        <Select
+            allowClear={true}
+            mode={"multiple"}
+            options={selectOptions}
+            placeholder={"Select paths to compress"}
+            popupRender={renderDropdown}
+            value={displayValue}
+            onClear={handleClear}
+            onDeselect={handleDeselect}/>
+    );
+};
+
+
+export default DirectoryTreeSelect;
diff --git a/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/SwitcherIcon.tsx b/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/SwitcherIcon.tsx
deleted file mode 100644
index 14ee8de0ec..0000000000
--- a/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/SwitcherIcon.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-
-import {
-    MinusOutlined,
-    PlusOutlined,
-} from "@ant-design/icons";
-import {TreeSelectProps} from "antd";
-
-
-type SwitcherIconFn = Exclude<TreeSelectProps["switcherIcon"], React.ReactNode>;
-
-type SwitcherIconProps = Parameters<NonNullable<SwitcherIconFn>>[0];
-
-
-/**
- * Icon component for tree node expand/collapse state.
- *
- * @param props
- * @param props.expanded Whether the node is expanded.
- * @return
- */
-const SwitcherIcon = ({expanded}: SwitcherIconProps) => (expanded ?
-    <MinusOutlined style={{color: "grey"}}/> :
-    <PlusOutlined style={{color: "grey"}}/>);
-
-
-export default SwitcherIcon;
diff --git a/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/index.module.css b/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/index.module.css
new file mode 100644
index 0000000000..65948eb73a
--- /dev/null
+++ b/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/index.module.css
@@ -0,0 +1,3 @@
+.directoryTreePopup {
+    padding: 4px;
+}
diff --git a/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/index.tsx b/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/index.tsx
index 6a6f631427..d822f05036 100644
--- a/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/index.tsx
+++ b/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/index.tsx
@@ -6,15 +6,10 @@ import {
 } from "react";
 
 import {FileEntry} from "@webui/common/schemas/os";
-import {
-    Form,
-    message,
-    TreeSelect,
-    TreeSelectProps,
-} from "antd";
+import {Form} from "antd";
 
 import {listFiles} from "../../../../api/os";
-import SwitcherIcon from "./SwitcherIcon";
+import DirectoryTreeSelect from "./DirectoryTreeSelect";
 import {
     ROOT_NODE,
     ROOT_PATH,
@@ -22,37 +17,23 @@ import {
 } from "./typings";
 import {
     addServerPrefix,
-    getListHeight,
+    handleLoadError,
     toTreeNode,
 } from "./utils";
 
 
-type LoadDataNode = Parameters<NonNullable<TreeSelectProps["loadData"]>>[0];
-
-type TreeExpandKeys = Parameters<NonNullable<TreeSelectProps["onTreeExpand"]>>[0];
-
 /**
  * Form item with TreeSelect for selecting file paths for compression.
- * Supports lazy loading and search with auto-expand.
+ * Uses DirectoryTree for intuitive folder/file navigation.
  *
  * @return
+ * @see https://ant.design/components/tree#tree-demo-directory
  */
 const PathsSelectFormItem = () => {
+    const form = Form.useFormInstance();
     const [treeData, setTreeData] = useState<TreeNode[]>([ROOT_NODE]);
     const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
-    const [listHeight, setListHeight] = useState<number>(getListHeight);
-
-    useEffect(() => {
-        const handleResize = () => {
-            setListHeight(getListHeight());
-        };
-
-        window.addEventListener("resize", handleResize);
-
-        return () => {
-            window.removeEventListener("resize", handleResize);
-        };
-    }, []);
+    const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
 
     // Use a ref, instead of a state passed to AntD's `treeLoadedKeys`, to dedupe load requests.
     const loadedPathsRef = useRef(new Set<string>());
@@ -85,61 +66,41 @@ const PathsSelectFormItem = () => {
         }
     }, [addNodes]);
 
+    const handleCheck = useCallback((keys: string[]) => {
+        setCheckedKeys(keys);
+        form.setFieldValue("paths", keys);
+    }, [form]);
+
+    const handleExpand = useCallback((keys: string[]) => {
+        setExpandedKeys(keys);
+    }, []);
+
+    const handleLoadData = useCallback(async (path: string) => {
+        await loadPath(path).catch(handleLoadError);
+    }, [loadPath]);
+
     // On initialization, load root directory contents.
     useEffect(() => {
         loadPath(ROOT_PATH)
             .then(() => {
                 setExpandedKeys([ROOT_PATH]);
             })
-            .catch((e: unknown) => {
-                console.error("Failed to load root directory:", e);
-                message.error(e instanceof Error ?
-                    e.message :
-                    "Failed to load root directory");
-            });
+            .catch(handleLoadError);
     }, [loadPath]);
 
-    const handleLoadData = useCallback(async ({value}: LoadDataNode) => {
-        if ("string" !== typeof value) {
-            return;
-        }
-        try {
-            await loadPath(value);
-        } catch (e) {
-            console.error("Failed to load directory:", e);
-            message.error(e instanceof Error ?
-                e.message :
-                "Unknown error while loading paths");
-        }
-    }, [loadPath]);
-
-    const handleTreeExpand = useCallback((keys: TreeExpandKeys) => {
-        setExpandedKeys(keys as string[]);
-    }, []);
-
     return (
         <Form.Item
             label={"Paths"}
             name={"paths"}
             rules={[{required: true, message: "Please select at least one path"}]}
         >
-            <TreeSelect
-                allowClear={true}
-                listHeight={listHeight}
-                loadData={handleLoadData}
-                multiple={true}
-                placeholder={"Select paths to compress"}
-                showCheckedStrategy={TreeSelect.SHOW_PARENT}
-                showSearch={false}
-                switcherIcon={SwitcherIcon}
-
-                treeCheckable={true}
+            <DirectoryTreeSelect
+                checkedKeys={checkedKeys}
+                expandedKeys={expandedKeys}
                 treeData={treeData}
-                treeDataSimpleMode={true}
-                treeExpandedKeys={expandedKeys}
-                treeLine={true}
-                treeNodeLabelProp={"value"}
-                onTreeExpand={handleTreeExpand}/>
+                onCheck={handleCheck}
+                onExpand={handleExpand}
+                onLoadData={handleLoadData}/>
         </Form.Item>
     );
 };
diff --git a/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/utils.ts b/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/utils.ts
index 3c2991ffb5..88b72dd523 100644
--- a/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/utils.ts
+++ b/components/webui/client/src/pages/IngestPage/Compress/PathsSelectFormItem/utils.ts
@@ -1,4 +1,6 @@
 import {FileEntry} from "@webui/common/schemas/os";
+import {message} from "antd";
+import type {TreeDataNode} from "antd/es";
 
 import {settings} from "../../../../settings";
 import {
@@ -98,9 +100,133 @@ const toTreeNode = (fileEntry: FileEntry, parentPath: string): TreeNode => {
 };
 
 
+/**
+ * Logs and displays an error message for path loading failures.
+ *
+ * @param e
+ */
+const handleLoadError = (e: unknown): void => {
+    console.error("Failed to load path:", e);
+    message.error(e instanceof Error ?
+        e.message :
+        "Failed to load path");
+};
+
+/**
+ * Converts flat tree data (simple mode) to hierarchical format for DirectoryTree.
+ *
+ * @param flatData Array of flat tree nodes with pId references
+ * @return Hierarchical tree structure with children arrays.
+ */
+const flatToHierarchy = (flatData: TreeNode[]): TreeDataNode[] => {
+    const nodeMap = new Map<string, TreeDataNode>();
+    const roots: TreeDataNode[] = [];
+
+    // Create all nodes
+    for (const node of flatData) {
+        nodeMap.set(node.id, {
+            key: node.value,
+            title: node.title,
+            isLeaf: node.isLeaf,
+            children: [],
+        });
+    }
+
+    // Build hierarchy
+    for (const node of flatData) {
+        const treeNode = nodeMap.get(node.id);
+        if (null === node.pId) {
+            if (treeNode) {
+                roots.push(treeNode);
+            }
+        } else {
+            const parent = nodeMap.get(node.pId);
+            if (parent?.children && treeNode) {
+                parent.children.push(treeNode);
+            }
+        }
+    }
+
+    return roots;
+};
+
+
+/**
+ * Filters checked keys to only include topmost ancestors. That is, if a node's parent is also
+ * checked, the node is excluded from the result.
+ *
+ * @param treeData
+ * @param checkedKeys
+ * @return Filtered keys containing only topmost checked ancestors.
+ */
+const filterToParents = (treeData: TreeNode[], checkedKeys: string[]): string[] => {
+    const checkedSet = new Set(checkedKeys);
+    const nodeMap = new Map(treeData.map((node) => [
+        node.id,
+        node,
+    ]));
+
+    return checkedKeys.filter((key) => {
+        // Include if node not found in tree data
+        if (false === nodeMap.has(key)) {
+            return true;
+        }
+
+        const node = nodeMap.get(key) as TreeNode;
+
+        // Exclude if parent is also checked; include otherwise
+        return null === node.pId || false === checkedSet.has(node.pId);
+    });
+};
+
+/**
+ * Removes a key and all its descendants from the checked keys.
+ *
+ * @param treeData Flat tree data with pId references
+ * @param checkedKeys Current checked keys
+ * @param keyToRemove The key to remove along with its descendants
+ * @return Checked keys with the specified key and descendants removed.
+ */
+const removeWithDescendants = (
+    treeData: TreeNode[],
+    checkedKeys: string[],
+    keyToRemove: string
+): string[] => {
+    // Build set of descendants by traversing the tree
+    const toRemove = new Set<string>([keyToRemove]);
+    const childrenMap = new Map<string, string[]>();
+
+    for (const node of treeData) {
+        if (null !== node.pId) {
+            const children = childrenMap.get(node.pId) ?? [];
+            children.push(node.id);
+            childrenMap.set(node.pId, children);
+        }
+    }
+
+    // BFS to find all descendants
+    const queue = [keyToRemove];
+    while (0 < queue.length) {
+        const current = queue[0] as string;
+        queue.shift();
+        const children = childrenMap.get(current) ?? [];
+        for (const child of children) {
+            toRemove.add(child);
+            queue.push(child);
+        }
+    }
+
+    return checkedKeys.filter((key) => false === toRemove.has(key));
+};
+
+
 export {
     addServerPrefix,
+    filterToParents,
+    flatToHierarchy,
     getListHeight,
+    handleLoadError,
+    removeWithDescendants,
     ROOT_PATH,
     toTreeNode,
 };