@concretecms/bedrock 1.3.6 → 1.4.0

package/assets/cms/components/file-manager/Uploader/UploadFromComputer.vue

@@ -4,7 +4,7 @@
             <div class="dz-default dz-message">
                 <button type="button" class="dz-button">
                     <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjEuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMzIgMTMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMzIgMTMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe29wYWNpdHk6MC45O2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0U2RjVGRjtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30KCS5zdDF7ZmlsbDojNEE5MEUyO30KCS5zdDJ7ZmlsbDpub25lO3N0cm9rZTojRThGNkZGO3N0cm9rZS13aWR0aDo4O30KPC9zdHlsZT4KPGcgaWQ9IlBhZ2UtMSI+Cgk8ZyBpZD0iRmlsZS1NYW5hZ2VyLS0tRmlsZVNldHMtRHJvcGRvd24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02NTUuMDAwMDAwLCAtNjY3LjAwMDAwMCkiPgoJCTxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjEiIHk9IjQ2OCIgY2xhc3M9InN0MCIgd2lkdGg9IjE0NDAiIGhlaWdodD0iNTQwIi8+CgkJPGcgaWQ9Imljb25zOC1kcmFnLWFuZC1kcm9wIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NTUuMDAwMDAwLCA2NjcuMDAwMDAwKSI+CgkJCTxwYXRoIGlkPSJTaGFwZSIgY2xhc3M9InN0MSIgZD0iTTMuMiwwYzAsMC0wLjEsMC0wLjEsMEMzLjEsMCwzLDAsMi45LDBDMi44LDAsMi43LDAuMSwyLjYsMC4xQzIuNCwwLjIsMi4xLDAuMiwxLjgsMC4zCgkJCQlDMS43LDAuNCwxLjUsMC41LDEuNCwwLjZDMS4yLDAuOCwxLDAuOSwwLjksMUMwLjgsMS4xLDAuNywxLjMsMC42LDEuNEMwLjUsMS42LDAuMywxLjgsMC4yLDIuMUMwLjIsMi4yLDAuMiwyLjQsMC4xLDIuNQoJCQkJQzAuMSwyLjcsMCwyLjksMCwzLjF2MTMuMWMwLDEuNywxLjQsMy4xLDMuMiwzLjFzMy4yLTEuNCwzLjItMy4xVjYuNGgxM2MxLjcsMCwzLjEtMS40LDMuMS0zLjJTMjEuMSwwLDE5LjQsMEgzLjUKCQkJCUMzLjQsMCwzLjQsMCwzLjIsMEMzLjMsMCwzLjIsMCwzLjIsMHogTTMyLjEsMEMzMC40LDAsMjksMS40LDI5LDMuMnMxLjQsMy4yLDMuMSwzLjJoNi42YzEuNywwLDMuMS0xLjQsMy4xLTMuMlM0MC40LDAsMzguNywwCgkJCQlIMzIuMXogTTUxLjQsMGMtMS43LDAtMy4xLDEuNC0zLjEsMy4yczEuNCwzLjIsMy4xLDMuMmg2LjZjMS43LDAsMy4xLTEuNCwzLjEtMy4yUzU5LjgsMCw1OC4xLDBINTEuNHogTTcwLjcsMAoJCQkJYy0xLjcsMC0zLjEsMS40LTMuMSwzLjJzMS40LDMuMiwzLjEsMy4yaDYuNmMxLjcsMCwzLjEtMS40LDMuMS0zLjJTNzkuMSwwLDc3LjQsMEg3MC43eiBNOTAsMGMtMS43LDAtMy4xLDEuNC0zLjEsMy4yCgkJCQlzMS40LDMuMiwzLjEsMy4yaDEzdjkuOGMwLDEuNywxLjQsMy4xLDMuMiwzLjFjMS44LDAsMy4yLTEuNCwzLjItMy4xVjMuMWMwLTAuMi0wLjEtMC40LTAuMS0wLjZjMC0wLjIsMC0wLjMtMC4xLTAuNQoJCQkJYy0wLjEtMC4yLTAuMi0wLjQtMC40LTAuN2MtMC4xLTAuMS0wLjItMC4zLTAuMy0wLjRjLTAuMi0wLjItMC4zLTAuMy0wLjUtMC40Yy0wLjItMC4xLTAuMy0wLjItMC41LTAuMwoJCQkJYy0wLjItMC4xLTAuNS0wLjEtMC44LTAuMmMtMC4xLDAtMC4yLTAuMS0wLjMtMC4xYy0wLjEsMC0wLjEsMC0wLjIsMGMwLDAtMC4xLDAtMC4xLDBjMCwwLDAsMC0wLjEsMGMtMC4xLDAtMC4xLDAtMC4yLDBIOTB6CgkJCQkgTTMuMiwyNS44Yy0xLjgsMC0zLjIsMS40LTMuMiwzLjF2Ni42YzAsMS43LDEuNCwzLjEsMy4yLDMuMXMzLjItMS40LDMuMi0zLjF2LTYuNkM2LjQsMjcuMiw1LDI1LjgsMy4yLDI1Ljh6IE0xMDYuMiwyNS44CgkJCQljLTEuOCwwLTMuMiwxLjQtMy4yLDMuMXY2LjZjMCwxLjcsMS40LDMuMSwzLjIsMy4xYzEuOCwwLDMuMi0xLjQsMy4yLTMuMXYtNi42QzEwOS41LDI3LjIsMTA4LDI1LjgsMTA2LjIsMjUuOHogTTMuMiw0NS4xCgkJCQljLTEuOCwwLTMuMiwxLjQtMy4yLDMuMXY2LjZDMCw1Ni41LDEuNCw1OCwzLjIsNThzMy4yLTEuNCwzLjItMy4xdi02LjZDNi40LDQ2LjUsNSw0NS4xLDMuMiw0NS4xeiBNNDEuOSw0NS4xCgkJCQlDMzQuOCw0NS4xLDI5LDUwLjksMjksNTh2NjEuMmMwLDcuMSw1LjgsMTIuOSwxMi45LDEyLjloNzcuM2M3LjEsMCwxMi45LTUuOCwxMi45LTEyLjlWNThjMC03LjEtNS44LTEyLjktMTIuOS0xMi45SDQxLjl6CgkJCQkgTTQxLjksNTEuNWg3Ny4zYzMuNiwwLDYuNCwyLjgsNi40LDYuNHY2MS4yYzAsMy42LTIuOCw2LjQtNi40LDYuNEg0MS45Yy0zLjYsMC02LjQtMi44LTYuNC02LjRWNTgKCQkJCUMzNS40LDU0LjQsMzguMyw1MS41LDQxLjksNTEuNXogTTMuMiw2NC40Yy0xLjgsMC0zLjIsMS40LTMuMiwzLjF2Ni42YzAsMS43LDEuNCwzLjEsMy4yLDMuMXMzLjItMS40LDMuMi0zLjF2LTYuNgoJCQkJQzYuNCw2NS44LDUsNjQuNCwzLjIsNjQuNHogTTc0LDcwLjhWMTAzbDcuOC02LjZsNC45LDExLjVsNC4xLTEuOGwtNS4yLTExLjNsMTAuOS0xLjRMNzQsNzAuOHogTTMuMiw4My43CgkJCQljLTEuOCwwLTMuMiwxLjQtMy4yLDMuMXYxMi43YzAsMC4xLDAsMC4xLDAsMC4yYzAsMCwwLDAsMCwwLjFjMCwwLDAsMC4xLDAsMC4xYzAsMC4xLDAsMC4xLDAsMC4yYzAsMC4xLDAuMSwwLjIsMC4xLDAuMwoJCQkJYzAuMSwwLjMsMC4xLDAuNSwwLjIsMC44YzAuMSwwLjIsMC4yLDAuMywwLjMsMC41YzAuMSwwLjIsMC4yLDAuNCwwLjQsMC41YzAuMSwwLjEsMC4zLDAuMiwwLjQsMC4zYzAuMiwwLjEsMC40LDAuMywwLjcsMC40CgkJCQljMC4xLDAuMSwwLjMsMC4xLDAuNSwwLjFjMC4yLDAsMC40LDAuMSwwLjYsMC4xaDE2LjNjMS43LDAsMy4xLTEuNCwzLjEtMy4ycy0xLjQtMy4yLTMuMS0zLjJoLTEzdi05LjhDNi40LDg1LjEsNSw4My43LDMuMiw4My43CgkJCQl6Ii8+CgkJPC9nPgoJCTxyZWN0IGlkPSJSZWN0YW5nbGUtQ29weS00IiB4PSI0IiB5PSIxNzciIGNsYXNzPSJzdDIiIHdpZHRoPSIxNDMyIiBoZWlnaHQ9IjgyOSIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=" alt="Drop files here or click to upload">
-                    <span>Drop files here or click to upload</span>
+                    <span>{{ this.dropzoneOptions && this.dropzoneOptions.dictDefaultMessage ? this.dropzoneOptions.dictDefaultMessage : 'Drop files here or click to upload' }}</span>
                 </button>
             </div>
             <input type="file" class="ccm-file-uploader-container-dropzone-file-element d-none" multiple="multiple">
@@ -57,6 +57,10 @@ export default {
             type: Object,
             default: () => ({})
         },
+        dropzoneOptions: {
+            type: Object,
+            default: () => ({})
+        },
         replaceFileId: {
             type: Number,
             required: false,
@@ -72,7 +76,7 @@ export default {
         },
         dropzoneSettings() {
             const me = this
-            return {
+            const dropzoneOptions = {
                 url: `${CCM_DISPATCHER_FILENAME}/ccm/system/file/upload`,
                 previewTemplate: this.itemTemplate,
                 autoProcessQueue: false,
@@ -126,8 +130,8 @@ export default {
 
                 queuecomplete: function () {
                     if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
+                        const fileIds = []
                         if (me.uploadedFiles.length !== 0) {
-                            const fileIds = []
                             me.uploadedFiles.forEach(function(file) {
                                 fileIds.push(file.fID)
                             })
@@ -135,7 +139,7 @@ export default {
                             // ConcreteEvent.publish('FileManagerSelectFile', { fID: fileIds })
                             me.uploadedFiles = []
                         }
-                        me.uploadComplete()
+                        me.uploadComplete(fileIds)
                     }
                     me.refresh()
                 },
@@ -161,6 +165,38 @@ export default {
                     $fileElement.addClass('in-progress')
                 }
             }
+            if (this.dropzoneOptions) {
+                for (const key in this.dropzoneOptions) {
+                    let skipMimeTypes
+                    switch (key) {
+                    case '_dontResizeMimeTypes':
+                        skipMimeTypes = this.dropzoneOptions._dontResizeMimeTypes
+                        if (skipMimeTypes && skipMimeTypes.length) {
+                            dropzoneOptions.transformFile = function(file, done) {
+                                if (
+                                    (this.options.resizeWidth || this.options.resizeHeight) &&
+                                            file && file.type && file.type.match(/image.*/) &&
+                                            skipMimeTypes.indexOf(file.type) < 0
+                                ) {
+                                    return this.resizeImage(
+                                        file,
+                                        this.options.resizeWidth,
+                                        this.options.resizeHeight,
+                                        this.options.resizeMethod,
+                                        done
+                                    )
+                                }
+                                return done(file)
+                            }
+                        }
+                        break
+                    default:
+                        dropzoneOptions[key] = this.dropzoneOptions[key]
+                        break
+                    }
+                }
+            }
+            return dropzoneOptions
         }
     },
     mounted() {
@@ -170,14 +206,14 @@ export default {
         $(me.$refs.dropzoneElement).dropzone(settings)
         $(window).on('resize', _.throttle(me.refresh, 100))
 
-        ConcreteEvent.subscribe('FileUploaderUploadSelectedFiles', function(e) {
-            me.dropzone.options.autoProcessQueue = true
-            me.dropzone.processQueue()
+        ConcreteEvent.subscribe('FileUploaderUploadSelectedFiles', () => {
+            this.startUploading()
         })
     },
     watch: {
         filesInQueue() {
             const filesInQueue = this.filesInQueue
+            this.$emit('files-ready-to-upload', filesInQueue)
             ConcreteEvent.publish('FileUploaderFilesReadyToUpload', filesInQueue)
         },
         isUploadInProgress(val, oldVal) {
@@ -222,8 +258,12 @@ export default {
 
             this.dropzone.removeAllFiles(true)
         },
-        uploadComplete() {
-            this.$emit('upload-complete')
+        startUploading() {
+            this.dropzone.options.autoProcessQueue = true
+            this.dropzone.processQueue()
+        },
+        uploadComplete(fileIds) {
+            this.$emit('upload-complete', fileIds)
 
             ConcreteAlert.notify({
                 title: 'Complete',

package/assets/cms/components/file-manager/Uploader.vue

@@ -2,6 +2,7 @@
     <div>
         <upload-from-computer
             :upload-directory-id="uploadDirectoryId"
+            :dropzone-options="dropzoneOptions"
             @upload-complete="$emit('upload-complete')"
             @uploadProgressStateChange="isUploadInProgress = $event"/>
 
@@ -23,6 +24,12 @@ export default {
         UploadFromComputer,
         ConcreteFileDirectoryInput
     },
+    props: {
+        dropzoneOptions: {
+            type: Object,
+            default: () => ({})
+        }
+    },
     data: () => ({
         uploadDirectoryId: 0,
         isUploadInProgress: false

package/assets/cms/components/form/ConcreteAjaxSelect.vue

@@ -0,0 +1,173 @@
+<template>
+    <input :class="cssClasses" :name="name" v-if="maxItems == 1" />
+    <select multiple :class="cssClasses" :name="name" v-else />
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
+export default {
+    props: {
+        // If we use this component in a traditional non-vue-based form, we need to
+        // have a name for the input field. This controls that. Can be safely left blank
+        // if you're just using this in Vue w/v-model
+        name: {
+            type: String
+        },
+        // Do we want our input/select to have any custom classes?
+        cssClasses: {
+            type: Array
+        },
+        // The value of whatever item we're selecting, be it user ID, page ID, array of page IDs, etc...
+        value: {
+            type: [Array, String, Number]
+        },
+        // The URL used to search
+        dataSourceUrl: {
+            type: String,
+            required: true
+        },
+        // The selected options URL
+        selectedOptionsUrl: {
+            type: String,
+            required: true
+        },
+        // The data sent to the server with every request. Paired with an access token to ensure
+        // that only authorized requests are responded to.
+        formData: {
+            type: Object,
+            required: true
+        },
+        // Used to authorize requests
+        accessToken: {
+            type: String,
+            required: true
+        },
+        // Whether to include the remove button on each selected item
+        removeButton: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        maxItems: {
+            required: false,
+            default: 1
+        },
+        allowCreate: {
+            type: Boolean,
+            required: false,
+            default: false
+        }
+    },
+    data() {
+        return {}
+    },
+    mounted() {
+        var my = this
+        var config = {
+            maxOptions: null,
+            maxItems: my.maxItems,
+            searchField: 'primary_label',
+            labelField: 'primary_label',
+            valueField: 'id',
+            load: function (query, callback) {
+                var formData = my.getFormData()
+                formData.append('query', query)
+                var url = my.dataSourceUrl
+                fetch(url, {
+                    method: 'POST',
+                    body: formData
+                })
+                    .then(response => response.json())
+                    .then(json => {
+                        callback(json)
+                    }).catch(() => {
+                        callback()
+                    })
+            },
+            render: {
+                option: function (item, escape) {
+                    return (typeof (my.$parent.renderOption) === 'function')
+                        ? my.$parent.renderOption(item) : my.renderOption(item)
+                },
+                item: function (item, escape) {
+                    return (typeof (my.$parent.renderItem) === 'function')
+                        ? my.$parent.renderItem(item) : my.renderItem(item)
+                }
+            }
+        }
+
+        if (this.removeButton) {
+            config.plugins = ['remove_button']
+        }
+
+        if (!this.maxItems) {
+            config.onItemAdd = function () {
+                // Without this method, Tom Select persists the search string even after we search for something,
+                // requiring us to delete the string in order to continue searching for something else - it's kind
+                // of annoying. it only seems to be a problem in multi-select mode ?!
+                this.setTextboxValue('')
+                this.refreshOptions()
+            }
+        }
+
+        if (this.allowCreate) {
+            config.createOnBlur = true
+            config.create = true
+        }
+
+        my.select = new TomSelect(this.$el, config)
+        my.select.on('change', function (value) {
+            my.$emit('change', value)
+        })
+    },
+    watch: {
+        value: {
+            immediate: true,
+            handler: function () {
+                var my = this
+                if (my.value) {
+                    var formData = my.getFormData()
+                    var url = my.selectedOptionsUrl
+                    fetch(url, {
+                        method: 'POST',
+                        body: formData
+                    })
+                        .then(response => response.json())
+                        .then(json => {
+                            json.forEach((item) => {
+                                my.select.addOption(item)
+                                my.select.addItem(item.id)
+                            })
+                        }).catch(() => {})
+                }
+            }
+        }
+    },
+    methods: {
+        getFormData() {
+            var formData = new FormData()
+            for (const [key, value] of Object.entries(this.formData)) {
+                if (Array.isArray(value)) {
+                    // Multi-select, as in the case of ConcreteExpressEntrySelect, etc...
+                    value.forEach((thisValue) => {
+                        formData.append(key + '[]', thisValue)
+                    })
+                } else if (typeof (value) === 'boolean') {
+                    formData.append(key, value ? 1 : 0)
+                } else {
+                    formData.append(key, value)
+                }
+            }
+            formData.append('accessToken', this.accessToken)
+            return formData
+        },
+        renderOption(item) {
+            return `<div>${(item.primary_label)}</div>`
+        },
+        renderItem(item) {
+            return `<div>${(item.primary_label)}</div>`
+        }
+    }
+}
+</script>

package/assets/cms/components/form/ConcreteExpressEntrySelect.vue

@@ -0,0 +1,74 @@
+<template>
+    <concrete-ajax-select
+        :name="inputName"
+        :access-token="accessToken"
+        :data-source-url="dataSourceUrl"
+        :selected-options-url="selectedOptionsUrl"
+        :value="entryId"
+        @change="updateSelected"
+        :form-data="formData"
+        :max-items="null"
+        :remove-button="true"
+    >
+    </concrete-ajax-select>
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
+import ConcreteAjaxSelect from './ConcreteAjaxSelect'
+export default {
+    components: { ConcreteAjaxSelect },
+    prop: ['entryId'],
+    model: {
+        prop: 'entryId',
+        event: 'change'
+    },
+    props: {
+        entity: {
+            type: String,
+            required: true
+        },
+        accessToken: {
+            type: String,
+            required: true
+        },
+        inputName: {
+            type: String
+        },
+        entryId: {
+            type: [Number, String, Array],
+            required: false
+        }
+    },
+    computed: {
+        formData() {
+            return {
+                entity: this.entity,
+                entryId: this.entryId
+            }
+        }
+    },
+    data() {
+        return {
+            dataSourceUrl: CCM_DISPATCHER_FILENAME + '/ccm/system/express/entry/autocomplete',
+            selectedOptionsUrl: CCM_DISPATCHER_FILENAME + '/ccm/system/express/entry/autocomplete/get_selected',
+            selectedEntryId: null
+        }
+    },
+    watch: {
+        entryId: {
+            immediate: true,
+            handler: function(entryId) {
+                this.selectedEntryId = entryId
+            }
+        }
+    },
+    methods: {
+        updateSelected(value) {
+            this.selectedEntryId = value
+            this.$emit('change', this.selectedEntryId)
+        }
+    }
+}
+</script>

package/assets/cms/components/form/ConcreteFileDirectoryInput.vue

@@ -4,22 +4,14 @@
             <div class="form-group">
                 <label class="form-label" :for="directorySelectInputId" v-if="inputLabel">{{inputLabel}}</label>
                 <div v-if="showAddDirectoryButton" class="input-group">
-                    <select :id="directorySelectInputId" :name="inputName" data-size="5" data-live-search="true" class="ccm-directory-selector form-control" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled">
-                        <option v-for="directory in directories" :class="`level-${directory.directoryLevel}`" :value="directory.directoryId" data-icon="fas fa-folder">
-                            {{ directory.directoryName }}
-                        </option>
-                    </select>
+                    <input :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled" />
                     <button type="button"
-                            :class="{'btn': true, 'btn-outline-secondary': true, 'ccm-create-new-directory-button': true, 'disabled': disabled === true}"
+                            :class="{'btn': true, 'btn-secondary': true, 'ccm-create-new-directory-button': true, 'disabled': disabled === true}"
                             @click="toggleDirectoryInput" :disabled="disabled">
                         {{ i18n.createNewFolder }}
                     </button>
                 </div>
-                <select v-else :id="directorySelectInputId" :name="inputName" class="ccm-directory-selector form-select" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled">
-                    <option v-for="directory in directories" :class="`level-${directory.directoryLevel}`" :value="directory.directoryId" data-icon="fas fa-folder">
-                        {{ directory.directoryName }}
-                    </option>
-                </select>
+                <input v-else :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled" />
             </div>
         </div>
         <div v-if="showAddDirectoryButton" v-show="showAddDirectoryInput" class="ccm-new-directory-name-container">
@@ -31,7 +23,7 @@
                            :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-outline-secondary': true, 'disabled': disabled === true}"
+                            :class="{'btn': true, 'btn-secondary': true, 'disabled': disabled === true}"
                             @click.stop.prevent="createDirectory" :disabled="disabled">
                         {{ i18n.add }}
                     </button>
@@ -43,7 +35,7 @@
 
 <script>
 /* eslint-disable no-new */
-/* global CCM_DISPATCHER_FILENAME, CCM_SECURITY_TOKEN, ConcreteAjaxRequest, _ */
+/* global TomSelect, CCM_DISPATCHER_FILENAME, CCM_SECURITY_TOKEN, ConcreteAjaxRequest, _ */
 export default {
     data: () => ({
         i18n: {
@@ -81,15 +73,11 @@ export default {
     },
     watch: {
         selectedDirectoryID() {
-            $(this.$refs.directoryInput).selectpicker('val', this.selectedDirectoryID)
-
             this.$emit('change', parseInt(this.selectedDirectoryID))
         },
         directories() {
             const me = this
             me.$nextTick(() => {
-                $(me.$refs.directoryInput).selectpicker('refresh')
-
                 if (me.directories.length > 0) {
                     const isSelectedOptionInDirList = _.findWhere(me.directories, { directoryId: me.selectedDirectoryID }) !== undefined
 
@@ -102,12 +90,11 @@ export default {
 
                 me.showAddDirectoryInput = false
                 me.newDirectoryName = ''
-            })
-        },
-        disabled() {
-            const me = this
-            me.$nextTick(function () {
-                $(me.$refs.directoryInput).selectpicker('refresh')
+
+                this.selectMenu.clear(true)
+                this.selectMenu.clearOptions()
+                this.selectMenu.addOptions(me.directories)
+                this.selectMenu.setValue(me.selectedDirectoryID)
             })
         }
     },
@@ -122,11 +109,26 @@ export default {
                 }
             }
         }
-        $(this.$refs.directoryInput).selectpicker()
-
         if (this.directoryId) {
             this.selectedDirectoryID = this.directoryId
         }
+
+        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> ${data.directoryName}</div>`
+                },
+                item: function (item, escape) {
+                    return `<div class="level-${item.directoryLevel}"><i class="fa fa-folder"></i> ${item.directoryName}</div>`
+                }
+            }
+        })
     },
     methods: {
         createDirectory() {
@@ -144,8 +146,8 @@ export default {
                 },
                 success: function (r) {
                     // re-fetch the directories and select the new folder
-                    me.fetchDirectories()
                     me.selectedDirectoryID = r.directoryId
+                    me.fetchDirectories()
                 }
             })
         },

package/assets/cms/components/form/ConcreteFileInput.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="ccm-item-selector-group">
-        <input type="hidden" :name="inputName" :value="selectedFileID" />
+        <input type="hidden" :name="inputName" :value="selectedFileID" ref="input" />
 
         <div class="ccm-item-selector-choose" v-if="!selectedFile && !isLoading">
             <button type="button" @click="openChooser" class="btn btn-secondary">
@@ -45,10 +45,11 @@ export default {
     props: {
         inputName: {
             type: String,
-            required: true
+            default: ''
         },
         fileId: {
-            type: Number
+            type: Number,
+            default: 0
         },
         chooseText: {
             type: String
@@ -57,7 +58,18 @@ export default {
             type: Array
         }
     },
+    prop: ['fileId'],
+    model: {
+        prop: 'fileId',
+        event: 'change'
+    },
     watch: {
+        fileId: {
+            immediate: true,
+            handler(value) {
+                this.selectedFileID = this.fileId
+            }
+        },
         selectedFileID: {
             immediate: true,
             handler(value) {
@@ -72,11 +84,11 @@ export default {
                         this.$emit('change', null)
                     }
                 }
-                if (!this.isFirstRun) {
+                if (!this.isFirstRun && this.inputName) {
                     // Fire the jQuery change event.
                     // @deprecated - do not use this unless you have to. Use this component directly instead and listen
                     // to its change event. This will be removed when the jQuery dependency is removed.
-                    $('input[name=' + this.inputName + ']').trigger('change')
+                    $(this.$refs.input).trigger('change')
                 }
                 this.isFirstRun = false
             }