Troubleshooting Kirby's k-files-dialog in Vue.js: File Type Restrictions & Search Bar Not Working

The CMS Questions
1

I am developing a custom field with vue.js. That field serves as a user-friendly way to create an image-gallery in a semi-wysiwyg Editor.
In that component I use kirbys native k-files-dialog which will show me and let me select files.
I call it with the following code:

this.$panel.dialog.open({
				component: 'k-files-dialog',
				props: {
					max: 1,
					endpoint: `/pages/${this.mediaPage}/sections/files`,
					fetchParams: { parent: this.mediaPage },
				},
				on: {
					submit: async (files) => {
						const fileInformation = await this.$api.files.get(
							`pages/${this.mediaPage}`,
							files[0].filename
						);
						this.editContent(index, `file://${fileInformation.content.uuid}`);
						this.$panel.dialog.close();
					},
					cancel: () => {},
					close: () => {},
				},
			});

I have the following Questions:
The native search bar in the files dialog is not working, why?
How can I limit the type of files the user can choose, like only choose images or only svg?

I found that kirby native fields use themselves as the endpoint and I think that the type restrictions are computed based on the field. How can I get that same behavior with my custom field, I had no success using my field as the endpoint.

I hope someone can share some insights about the “file-picker magic”.
Thanks.

2

I found that the files dialogue is highly dependent on the files field it requests in the api. To be able to set a source and use files methods it will need an actual files field, queries on the custom field are ignored. My solution was then to create a field group with a dummy files field like so:

    fields:
      gallery:
        type: group
        fields:
          gallery:
            label: Bilder
            type: imageGallery
            defaultLayout: grid3
          gallerySource:
            label: This field is used to set the source of the gallery. It is never displayed.
            type: files
            query: site.mediaPage.files.onlyImages
            when:
              gallery: false

I then used that source field in my vue component as the endpoint.

this.$panel.dialog.open({
				component: 'k-files-dialog',
				props: {
					max: 1,
					endpoint: this._props.endpoints.field.replace(/[^/]+$/, 'gallerySource'),
					fetchParams: { parent: this.mediaPage },
				},
				on: {
					submit: async (files) => {
						const fileInformation = await this.$api.files.get(
							`pages/${this.mediaPage}`,
							files[0].filename
						);
						this.editContent(index, `file://${fileInformation.content.uuid}`);
						this.$panel.dialog.close();
					},
					cancel: () => {},
					close: () => {},
				},
			});

Notice that the custom field only has its own endpoints accessible and we have to replace the last part of the path with fieldname of our dummy field.

Its not a nice solution but it works.