diff --git a/assets/cms/components/file-manager/Chooser/ExternalFileProvider.vue b/assets/cms/components/file-manager/Chooser/ExternalFileProvider.vue
index 4b7a2018..cd9f3335 100644
--- a/assets/cms/components/file-manager/Chooser/ExternalFileProvider.vue
+++ b/assets/cms/components/file-manager/Chooser/ExternalFileProvider.vue
@@ -45,6 +45,7 @@
         v-show="keywords != ''"
         :input-label="i18n.uploadFilesTo"
         input-name="uploadDirectoryId"
+        :directory-id="extraData.uploadDirectoryId"
         :show-add-directory-button="true"
         ref="folderSelector"
         @change="uploadDirectoryId = $event"/>
@@ -139,7 +140,6 @@ export default {
     }
     this.formFactor = this.resultsFormFactor
     this.getFileTypes()
-    this.$refs.folderSelector.selectedDirectoryID = this.extraData.uploadDirectoryId
   }
 }
 </script>
diff --git a/assets/cms/components/form/ConcreteFileDirectoryInput.vue b/assets/cms/components/form/ConcreteFileDirectoryInput.vue
index dc06e0f1..970400b3 100644
--- a/assets/cms/components/form/ConcreteFileDirectoryInput.vue
+++ b/assets/cms/components/form/ConcreteFileDirectoryInput.vue
@@ -2,30 +2,58 @@
     <div>
         <div class="ccm-directory-selector-container">
             <div class="form-group">
-                <label class="form-label" :for="directorySelectInputId" v-if="inputLabel">{{ inputLabel }}</label>
-                <div v-if="showAddDirectoryButton" class="input-group">
-                    <input :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID"
-                           ref="directoryInput" :disabled="disabled"/>
-                    <button type="button"
-                            :class="{'btn': true, 'btn-secondary': true, 'ccm-create-new-directory-button': true, 'disabled': disabled === true}"
-                            @click="toggleDirectoryInput" :disabled="disabled">
-                        {{ i18n.createNewFolder }}
+                <label class="form-label" v-if="inputLabel">
+                    {{ inputLabel }}<template v-if="selectedDirectory">: {{ selectedDirectoryLabel }}</template>
+                </label>
+                <input type="hidden" :name="inputName" :value="selectedDirectoryID" :disabled="disabled">
+
+                <div class="d-flex align-items-center justify-content-between gap-2 mb-2">
+                    <div class="btn-group btn-group-sm" role="group">
+                        <button type="button" class="btn btn-secondary"
+                                :class="{'active': pickerMode === 'tree'}"
+                                :aria-pressed="pickerMode === 'tree'"
+                                @click="showTree" :disabled="disabled">
+                            {{ i18n.browseFolders }}
+                        </button>
+                        <button type="button" class="btn btn-secondary"
+                                :class="{'active': pickerMode === 'search'}"
+                                :aria-pressed="pickerMode === 'search'"
+                                @click="pickerMode = 'search'" :disabled="disabled">
+                            {{ i18n.searchFolders }}
+                        </button>
+                    </div>
+                    <button v-if="showAddDirectoryButton" type="button"
+                            :class="{'btn': true, 'btn-secondary': true, 'btn-sm': true, 'ccm-create-new-directory-button': true}"
+                            @click="toggleDirectoryInput" :disabled="disabled || selectedDirectoryID === 0">
+                        {{ showAddDirectoryInput ? i18n.cancelFolderCreation : i18n.createNewFolder }}
                     </button>
                 </div>
-                <input v-else :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID"
-                       ref="directoryInput" :disabled="disabled"/>
+
+                <div v-show="pickerMode === 'tree'" ref="directoryTree"
+                     class="ccm-directory-selector-tree border rounded p-2"></div>
+                <div v-show="pickerMode === 'search'" class="border rounded p-3">
+                    <input :id="directorySearchInputId" ref="directorySearchInput" :disabled="disabled">
+                    <div v-if="hasMoreSearchResults" class="form-text mt-2">
+                        {{ i18n.moreFoldersFound }}
+                    </div>
+                </div>
+
             </div>
         </div>
         <div v-if="showAddDirectoryButton" v-show="showAddDirectoryInput" class="ccm-new-directory-name-container">
             <div class="form-group">
-                <label class="form-label" :for="directoryInputId">{{ i18n.name }}</label>
+                <div class="form-label">
+                    {{ i18n.createInside }}: {{ selectedDirectoryLabel }}
+                </div>
+                <label class="form-label" :for="directoryInputId">{{ i18n.newFolderName }}</label>
                 <div class="input-group">
                     <input type="text"
                            :id="directoryInputId"
+                           ref="directoryNameInput"
+                           maxlength="255"
                            :placeholder="i18n.specifyName" class="ccm-new-directory-name form-control"
                            v-model="newDirectoryName" @keyup.enter.stop.prevent="createDirectory" :disabled="disabled">
-                    <button type="button"
-                            :class="{'btn': true, 'btn-secondary': true, 'disabled': disabled === true}"
+                    <button type="button" class="btn btn-secondary"
                             @click.stop.prevent="createDirectory" :disabled="disabled">
                         {{ i18n.add }}
                     </button>
@@ -37,21 +65,36 @@
 
 <script>
 /* eslint-disable no-new */
-/* global TomSelect, CCM_DISPATCHER_FILENAME, CCM_SECURITY_TOKEN, ConcreteAjaxRequest, _ */
+/* global $, CCM_DISPATCHER_FILENAME, CCM_SECURITY_TOKEN, ConcreteAjaxRequest, _ */
 export default {
     data: () => ({
         i18n: {
+            add: 'Add',
+            browseFolders: 'Browse Folders',
+            cancelFolderCreation: 'Cancel Folder Creation',
+            createInside: 'Create inside',
             createNewFolder: 'Create New Folder',
-            name: 'Name',
-            specifyName: 'Please enter a name...',
-            add: 'Add'
+            fileManager: 'File Manager',
+            moreFoldersFound: 'More folders found. Refine your search.',
+            newFolderName: 'New folder name',
+            searchFolders: 'Search Folders',
+            specifyName: 'Please enter a name...'
         },
-        showAddDirectoryInput: false,
-        selectedDirectoryID: 0,
-        directorySelectInputId: _.uniqueId('input-'),
         directoryInputId: _.uniqueId('input-'),
-        directories: [],
-        newDirectoryName: ''
+        directorySearchInputId: _.uniqueId('input-'),
+        hasMoreSearchResults: false,
+        newDirectoryName: '',
+        pickerMode: 'tree',
+        preserveSearchOnBlur: false,
+        rootDirectoryID: 0,
+        searchFocusTimeout: null,
+        searchMenu: null,
+        searchQuery: '',
+        searchRequestID: 0,
+        selectedDirectory: null,
+        selectedDirectoryID: 0,
+        showAddDirectoryInput: false,
+        treeSelectionRequestID: 0
     }),
     props: {
         inputLabel: {
@@ -73,35 +116,21 @@ export default {
             default: false
         }
     },
-    watch: {
-        selectedDirectoryID() {
-            this.$emit('change', parseInt(this.selectedDirectoryID))
-        },
-        directories() {
-            const me = this
-            me.$nextTick(() => {
-                if (me.directories.length > 0) {
-                    const isSelectedOptionInDirList = _.findWhere(me.directories, { directoryId: me.selectedDirectoryID }) !== undefined
-
-                    if (!isSelectedOptionInDirList) {
-                        me.selectedDirectoryID = _.first(me.directories).directoryId
-                    }
-                } else {
-                    me.selectedDirectoryID = 0
-                }
-
-                me.showAddDirectoryInput = false
-                me.newDirectoryName = ''
+    computed: {
+        selectedDirectoryLabel() {
+            if (!this.selectedDirectory) {
+                return ''
+            }
 
-                this.selectMenu.clear(true)
-                this.selectMenu.clearOptions()
-                this.selectMenu.addOptions(me.directories)
-                this.selectMenu.setValue(me.selectedDirectoryID)
-            })
+            return this.selectedDirectory.directoryPath === '/'
+                ? this.i18n.fileManager
+                : (this.selectedDirectory.directoryPath || this.selectedDirectory.directoryName)
         }
     },
-    created() {
-        this.fetchDirectories()
+    watch: {
+        disabled() {
+            this.updateDisabledState()
+        }
     },
     mounted() {
         if (window.ccmi18n_filemanager) {
@@ -111,77 +140,370 @@ export default {
                 }
             }
         }
-        if (this.directoryId) {
-            this.selectedDirectoryID = this.directoryId
-        }
 
-        var my = this
-        this.selectMenu = new TomSelect(this.$refs.directoryInput, {
-            maxOptions: 200,
-            maxItems: 1,
-            items: [this.selectedDirectoryID],
-            options: [],
-            valueField: 'directoryId',
-            searchField: 'directoryName',
-            render: {
-                option: function (data, escape) {
-                    return `<div class="level-${data.directoryLevel}"><i class="fa fa-folder"></i> ${my.sanitizeDirectoryName(data.directoryName)} </div>`
-                },
-                item: function (item, escape) {
-                    return `<div class="level-${item.directoryLevel}"><i class="fa fa-folder"></i> ${my.sanitizeDirectoryName(item.directoryName)} </div>`
-                }
-            }
-        })
+        this.initializeSearch()
+        document.addEventListener('mousedown', this.trackSearchScrollbarInteraction, true)
+        this.fetchInitialDirectory()
+    },
+    beforeDestroy() {
+        clearTimeout(this.searchFocusTimeout)
+        document.removeEventListener('mousedown', this.trackSearchScrollbarInteraction, true)
+        document.removeEventListener('mouseup', this.resetSearchScrollbarInteraction, true)
+        $(this.$refs.directoryTree).off('.directoryPicker')
+        if (this.searchMenu) {
+            this.searchMenu.control_input.removeEventListener('input', this.handleSearchInput)
+            this.searchMenu.destroy()
+        }
+        if ($.ui.fancytree.getTree(this.$refs.directoryTree)) {
+            $(this.$refs.directoryTree).fancytree('destroy')
+        }
     },
     methods: {
-        sanitizeDirectoryName(directoryName) {
-            const div = document.createElement('div')
-            div.textContent = directoryName
-            return div.innerHTML
-        },
         createDirectory() {
-            const me = this
-            if (!me.showAddDirectoryInput || me.disabled) {
+            if (!this.showAddDirectoryInput || this.disabled || !this.selectedDirectoryID) {
                 return
             }
 
+            const parentDirectoryID = this.selectedDirectoryID
             new ConcreteAjaxRequest({
                 url: `${CCM_DISPATCHER_FILENAME}/ccm/system/file/create_directory?_=${Date.now()}`,
                 data: {
                     ccm_token: CCM_SECURITY_TOKEN,
-                    directoryName: me.newDirectoryName,
-                    currentFolder: me.selectedDirectoryID
+                    directoryName: this.newDirectoryName,
+                    currentFolder: parentDirectoryID
                 },
-                success: function (r) {
-                    // re-fetch the directories and select the new folder
-                    me.selectedDirectoryID = r.directoryId
-                    me.fetchDirectories()
+                success: r => {
+                    this.loadDirectory(r.directoryId, directory => {
+                        this.setSelectedDirectory(directory)
+                        this.showAddDirectoryInput = false
+                        this.newDirectoryName = ''
+                        this.refreshTreeNode(parentDirectoryID, directory.directoryId)
+                    })
                 }
             })
         },
-        fetchDirectories() {
-            const me = this
+        fetchInitialDirectory() {
+            const data = {
+                ccm_token: CCM_SECURITY_TOKEN,
+                mode: this.directoryId ? 'directory' : 'search'
+            }
+            if (this.directoryId) {
+                data.directoryId = this.directoryId
+            } else {
+                data.query = ''
+            }
+
+            new ConcreteAjaxRequest({
+                url: `${CCM_DISPATCHER_FILENAME}/ccm/system/file/fetch_directories?_=${Date.now()}`,
+                loader: false,
+                data,
+                success: r => {
+                    this.rootDirectoryID = parseInt(r.rootDirectory.directoryId)
+                    const requestedDirectory = _.first(r.directories)
+                    const directory = requestedDirectory || (r.rootDirectory.canAddFiles ? r.rootDirectory : null)
+                    if (directory) {
+                        this.setSelectedDirectory(directory)
+                    }
+                    this.$nextTick(() => this.initializeTree())
+                }
+            })
+        },
+        initializeSearch() {
+            this.searchMenu = new window.TomSelect(this.$refs.directorySearchInput, {
+                loadThrottle: 300,
+                maxItems: 1,
+                maxOptions: 50,
+                placeholder: this.i18n.searchFolders,
+                searchField: ['directoryName', 'directoryPath'],
+                valueField: 'directoryId',
+                load: (query, callback) => {
+                    const requestID = ++this.searchRequestID
+                    if (!query.length) {
+                        this.hasMoreSearchResults = false
+                        callback()
+                        return
+                    }
+                    new ConcreteAjaxRequest({
+                        url: `${CCM_DISPATCHER_FILENAME}/ccm/system/file/fetch_directories?_=${Date.now()}`,
+                        loader: false,
+                        data: {
+                            ccm_token: CCM_SECURITY_TOKEN,
+                            mode: 'search',
+                            query
+                        },
+                        success: r => {
+                            if (requestID !== this.searchRequestID) {
+                                callback()
+                                return
+                            }
+                            this.hasMoreSearchResults = r.hasMoreDirectories === true
+                            callback(r.directories)
+                        },
+                        error: () => {
+                            if (requestID === this.searchRequestID) {
+                                this.hasMoreSearchResults = false
+                            }
+                            callback()
+                        }
+                    })
+                },
+                render: {
+                    option: (data, escape) => {
+                        return `<div><i class="fa fa-folder me-2"></i><strong>${escape(data.directoryName)}</strong><div class="small text-muted">${escape(data.directoryPath)}</div></div>`
+                    },
+                    item: (data, escape) => {
+                        return `<div><i class="fa fa-folder me-2"></i>${escape(data.directoryName)}</div>`
+                    }
+                },
+                shouldLoad: query => query.length > 0
+            })
+            this.searchMenu.control_input.addEventListener('input', this.handleSearchInput)
+            this.searchMenu.on('change', directoryID => {
+                if (directoryID) {
+                    this.loadDirectory(directoryID, directory => {
+                        this.setSelectedDirectory(directory)
+                    })
+                }
+            })
+            this.searchMenu.on('blur', () => {
+                if (this.preserveSearchOnBlur && this.searchQuery && !this.searchMenu.items.length) {
+                    this.searchMenu.setTextboxValue(this.searchQuery)
+                } else {
+                    this.searchQuery = ''
+                    this.clearSearchResults()
+                }
+            })
+            this.searchMenu.on('dropdown_close', () => {
+                if (this.searchMenu.isFocused && !this.searchMenu.items.length &&
+                    !this.searchMenu.control_input.value &&
+                    (this.hasMoreSearchResults || Object.keys(this.searchMenu.options).length)) {
+                    this.searchQuery = ''
+                    this.clearSearchResults()
+                }
+            })
+            this.updateDisabledState()
+        },
+        initializeTree() {
+            const selectedNodes = this.selectedDirectoryID ? [this.selectedDirectoryID] : []
+            const $tree = $(this.$refs.directoryTree)
+            $tree.off('.directoryPicker')
+            if ($.ui.fancytree.getTree(this.$refs.directoryTree)) {
+                $tree.fancytree('destroy')
+            }
+            $tree.on('fancytreebeforeselect.directoryPicker', (event, data) => {
+                if (event.originalEvent && data.node.isSelected()) {
+                    return false
+                }
+            })
+            $tree.one('fancytreeinit.directoryPicker', () => {
+                const tree = $.ui.fancytree.getTree(this.$refs.directoryTree)
+                const rootNode = tree ? tree.getNodeByKey(String(this.rootDirectoryID)) : null
+                if (rootNode) {
+                    rootNode.setTitle(this.i18n.fileManager)
+                }
+                this.revealSelectedDirectory()
+            })
+            $tree.concreteTree({
+                ajaxData: {
+                    displayOnly: 'file_folder',
+                    requireFileUploadPermission: 1
+                },
+                treeNodeParentID: this.rootDirectoryID,
+                selectNodesByKey: selectedNodes,
+                onSelect: nodes => {
+                    if (!nodes.length) {
+                        return
+                    }
+
+                    const directoryID = parseInt(nodes[0])
+                    const tree = $.ui.fancytree.getTree(this.$refs.directoryTree)
+                    const node = tree ? tree.getNodeByKey(String(directoryID)) : null
+                    if (!node || !node.isSelected() || directoryID === this.selectedDirectoryID) {
+                        return
+                    }
+
+                    const requestID = ++this.treeSelectionRequestID
+                    this.loadDirectory(directoryID, directory => {
+                        if (requestID === this.treeSelectionRequestID) {
+                            this.setSelectedDirectory(directory)
+                        }
+                    })
+                },
+                chooseNodeInForm: 'single',
+                selectNodeOnTitleClick: true
+            })
+            this.updateDisabledState()
+        },
+        clearSearchResults() {
+            ++this.searchRequestID
+            this.hasMoreSearchResults = false
+            this.searchMenu.clearOptions()
+        },
+        handleSearchInput(event) {
+            this.searchQuery = event.target.value
+            if (this.searchQuery) {
+                return
+            }
+
+            this.clearSearchResults()
+            this.searchMenu.close(false)
+        },
+        loadDirectory(directoryID, callback) {
             new ConcreteAjaxRequest({
                 url: `${CCM_DISPATCHER_FILENAME}/ccm/system/file/fetch_directories?_=${Date.now()}`,
                 loader: false,
                 data: {
-                    ccm_token: CCM_SECURITY_TOKEN
+                    ccm_token: CCM_SECURITY_TOKEN,
+                    mode: 'directory',
+                    directoryId: directoryID
                 },
-                success: function (r) {
-                    me.directories = r.directories
+                success: r => {
+                    const directory = _.first(r.directories)
+                    if (directory) {
+                        callback(directory)
+                    }
                 }
             })
         },
-        toggleDirectoryInput() {
-            const me = this
-            if (!me.showAddDirectoryButton || me.disabled) {
+        refreshTreeNode(parentDirectoryID, selectedDirectoryID) {
+            const tree = $.ui.fancytree.getTree(this.$refs.directoryTree)
+            const parentNode = tree ? tree.getNodeByKey(String(parentDirectoryID)) : null
+            if (!parentNode) {
+                return
+            }
+
+            parentNode.resetLazy()
+            parentNode.setExpanded(true).done(() => {
+                const selectedNode = tree.getNodeByKey(String(selectedDirectoryID))
+                if (selectedNode) {
+                    selectedNode.setSelected(true)
+                }
+            })
+        },
+        revealSelectedDirectory() {
+            const tree = $.ui.fancytree.getTree(this.$refs.directoryTree)
+            if (!tree || !this.selectedDirectoryID) {
                 return
             }
 
-            me.showAddDirectoryInput = !me.showAddDirectoryInput
+            const directoryPathIDs = this.selectedDirectory &&
+                Array.isArray(this.selectedDirectory.directoryPathIds)
+                ? this.selectedDirectory.directoryPathIds
+                : [this.selectedDirectoryID]
+            const directoryPathKeys = directoryPathIDs.map(directoryID => String(directoryID))
+            const nodesToCollapse = []
+            tree.getRootNode().visit(node => {
+                if (node.expanded && directoryPathKeys.indexOf(node.key) === -1) {
+                    nodesToCollapse.push(node)
+                }
+            })
+            nodesToCollapse.reverse().forEach(node => node.setExpanded(false))
+            const revealNode = index => {
+                const node = tree.getNodeByKey(String(directoryPathIDs[index]))
+                if (!node) {
+                    return
+                }
+                if (index === directoryPathIDs.length - 1) {
+                    node.setSelected(true)
+                    node.makeVisible({ scrollIntoView: true })
+                    return
+                }
 
-            me.$emit('toggleDirectoryInput', me.showAddDirectoryInput)
+                $.when(node.setExpanded(true)).done(() => revealNode(index + 1))
+            }
+            revealNode(0)
+        },
+        resetSearchScrollbarInteraction() {
+            const restoreFocus = this.preserveSearchOnBlur && this.searchQuery &&
+                this.searchMenu && !this.searchMenu.isFocused
+            if (restoreFocus) {
+                this.searchFocusTimeout = setTimeout(() => {
+                    this.searchFocusTimeout = null
+                    this.preserveSearchOnBlur = false
+                    if (this.searchMenu && this.searchQuery) {
+                        this.searchMenu.focus()
+                    }
+                })
+            } else {
+                this.preserveSearchOnBlur = false
+            }
+        },
+        setSelectedDirectory(directory) {
+            const directoryID = parseInt(directory.directoryId)
+            const changed = directoryID !== this.selectedDirectoryID
+            this.hasMoreSearchResults = false
+            this.searchQuery = ''
+            this.selectedDirectory = directory
+            this.selectedDirectoryID = directoryID
+            if (this.searchMenu) {
+                this.searchMenu.clear(true)
+                this.searchMenu.clearOptions()
+            }
+            if (changed) {
+                this.$emit('change', directoryID)
+            }
+        },
+        showTree() {
+            this.pickerMode = 'tree'
+            this.$nextTick(() => this.revealSelectedDirectory())
+        },
+        trackSearchScrollbarInteraction(event) {
+            this.preserveSearchOnBlur = false
+            document.removeEventListener('mouseup', this.resetSearchScrollbarInteraction, true)
+            if (!this.searchMenu || !this.searchMenu.isFocused) {
+                return
+            }
+
+            const dialogContent = this.$el.closest('.ui-dialog-content')
+            if (!dialogContent) {
+                return
+            }
+
+            const scrollbarWidth = dialogContent.offsetWidth - dialogContent.clientWidth
+            const bounds = dialogContent.getBoundingClientRect()
+            this.preserveSearchOnBlur = scrollbarWidth > 0 &&
+                event.clientX >= bounds.right - scrollbarWidth && event.clientX <= bounds.right &&
+                event.clientY >= bounds.top && event.clientY <= bounds.bottom
+            if (this.preserveSearchOnBlur) {
+                document.addEventListener('mouseup', this.resetSearchScrollbarInteraction, {
+                    capture: true,
+                    once: true
+                })
+            }
+        },
+        toggleDirectoryInput() {
+            if (!this.showAddDirectoryButton || this.disabled) {
+                return
+            }
+
+            this.showAddDirectoryInput = !this.showAddDirectoryInput
+            if (this.showAddDirectoryInput) {
+                this.$nextTick(() => this.$refs.directoryNameInput.focus())
+            } else {
+                this.newDirectoryName = ''
+            }
+            this.$emit('toggleDirectoryInput', this.showAddDirectoryInput)
+        },
+        updateDisabledState() {
+            if (this.searchMenu) {
+                if (this.disabled) {
+                    this.searchMenu.lock()
+                } else {
+                    this.searchMenu.unlock()
+                }
+            }
+            if ($.ui.fancytree.getTree(this.$refs.directoryTree)) {
+                $(this.$refs.directoryTree).fancytree(this.disabled ? 'disable' : 'enable')
+            }
         }
     }
 }
 </script>
+
+<style scoped>
+.ccm-directory-selector-tree {
+  max-height: 16rem;
+  min-height: 10rem;
+  overflow: auto;
+}
+</style>
diff --git a/assets/cms/js/tree.js b/assets/cms/js/tree.js
index 6ee4ec99..c5648982 100644
--- a/assets/cms/js/tree.js
+++ b/assets/cms/js/tree.js
@@ -12,6 +12,7 @@ function ConcreteTree($element, options) {
         treeID: false,
         onClick: false,
         allowFolderSelection: true,
+        selectNodeOnTitleClick: false,
         selectNodesByKey: [],
         removeNodesByKey: [],
         removeNodesByCallback: false,
@@ -205,6 +206,9 @@ ConcreteTree.prototype = {
                 }
 
                 if (options.chooseNodeInForm && data.targetType != 'checkbox') {
+                    if (options.selectNodeOnTitleClick && data.targetType == 'title') {
+                        data.node.setSelected(true)
+                    }
                     return false
                 }