Files Field <k-files-field /> not working inside my custom field plugin

Kirby 3 Questions 🤔
1

Hey,

I am working on a field plugin that allows me to select a file and to do some other stuff with it. I am struggling to get the <k-files-field /> component running. the vue component for my custom field looks something like this:

<template>
  <k-field
    label="SEO und Social Media"
  >
    <!-- do some stuff here -->
    <k-files-field
      name="filesfield"
      v-model="files"
      :endpoints="endpoints"
    />
    <!-- and some more stuff here -->
  </k-field>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  props: ["endpoints"],
};
</script>

I can’t get my head around on how exactly the logic around the endpoint object works. This parameter is automatically passed to my field and looks something like this:

{
  "field":"pages/blog+licensing-kirby/fields/myfieldname",
  "section":"pages/blog+licensing-kirby/sections/main-col-0-fields",
  "model":"pages/blog+licensing-kirby"
}

The files object appears to require this as a property. The file field needs the field path to build the route /api/pages/blog+licensing-kirby/fields/myfieldname that seems to be used to ask the server for the files. However, this does not work anymore when the files field is nested into my own custom field. I get the error message “The files query does not seem to be correct” when I try to select a file. I guess this is because the route does only contains the path to my custom field (here it is the field with the blueprint name “myfieldname”) and not to the files field.

What is the best approach to get the files field running inside a custom field? Do I have to override the endpoints object with my own api route? I tried this, but the api route handling seems not to let my request through to my route actions.

Thanks in advance,
Tim

2

Nobody? I just wonder if there is at all any non-hacky way to use the Files Field from the UI Kit.

3

Maybe my topic here helps you, Tim: Using the pages dialog component in a plugin

I guess the endpoints for pages and files are similar. I must confess I don’t fully understand it myself — but Lukas’ suggestion worked for me.

4

@timoetting Did you find a solution?

I’m currently trying to access the files myself. While the pages-dialog works flawlessly, the files dialog doesn’t display anything.

5

No, not really :confused:

6

Is there any news on this? I’m trying to achieve the exact same thing!

I managed to have a file upload in my custom field with the k-upload component from the ui kit, constructing the url used for the file upload like this:

    <k-upload
      ref="upload"
      :url="`./api/${endpoints.model}/files`"
    ></k-upload>

Now, instead of triggering the k-upload manually I want to use the k-files-field instead. It should still just upload to ./api/${endpoints.model}/files. I take care of storing which file has been uploaded in my custom field.

So what endpoints should i use? It seems like I need the endpoints of a field that doesn’t actually exist, all I want to provide is the endpoint where the file(s) should be uploaded to.

7

anyone figure this out, currently having a similar issue to the above?