Success handler of <k-upload> does not work properly

[weedukind]

Hi,

the references at
https://getkirby.com/docs/reference/plugins/ui/upload
say “The API response is returned as second argument in the @success event”

I experienced that

1. the first argument contains some data about the uploaded file generated by Kirby
2. But the second argument is [undefined] which is different from the
3. third argument (for comparison) which is undefined.

Since the 2nd argument is not undefined, we see that Kirby tries to provide some data.
Is there any specific response format needed in order success() can be called properly?
What else could be wrong?

Here is my code:

panel.plugin("myPlugin/image", {
  fields: {
    directimage: {
      methods: {
        upload() {
          this.$refs.upload.open({
            url: window.panel.api + '/myPlugin/image/upload',
            accept: "image/*",
            multiple: true
          });
        },
        onSuccess (uploads, response, third) {
          console.log(uploads);
          console.log(response);
          console.log(third);
        }
      },
      template: `
        <div>
        <k-upload ref="upload" @success="onSuccess" />
        <k-button icon="upload" @click="upload">Upload</k-button>
        </div>
      `
    }
  }
});

[weedukind]

Anything unclear?

If creating new fields does not work out of the box the biggest advantage of Kirby CMS is not given anymore.

[texnixe]

Could you post your complete code?

What seems in the docs is window.panel.api which should be:

url: this.$urls.api + '/myplugin/image/upload',

what is your Kirby version?

[weedukind]

I tried a little bit around. The current version of the (complete) code is:

export default {

  props: {
    value: String,
  },

  methods: {
    upload() {
      this.$refs.upload.open({
        url: window.panel.api + '/media/freePicturesPost',
//        url: this.$urls.api + '/media/freePicturesPost', // this.$urls is undefined

        accept: "image/*",
        multiple: true
      });
    },
    onSuccess (uploads, response) {
      // i.e.
console.log(uploads); // the response from the API endpoint, that works
console.log(response); // undefined

      // etc.
    }
  },
  template: `
    <div>
      <k-image :src="value" />
      <k-upload ref="upload" @success="onSuccess"  />
      <k-button icon="upload" @click="upload">Upload</k-button>
      {{ value }}
    </div>
  `
}

Honestly I do not know where I found the path beginning with window.panel.api but I tried this.$urls.api, too, and it seems not to exist.

Just to clearify: The rendering of and works perfectly, the file is uploaded to the endpoint specified in the function upload().

What does not work is that the second parameter of the function onSucess() is undefined, where the api response is expected to be found.

My Kirby version is 3.5.7.1.

Thanks in advance!

[texnixe]

@weedukind

My Kirby version is 3.5.7.1.

Oh, ok, because I corrected the docs for Kirby 3.6 where it must be this.$urls.api. Was assuming your were as well because you linked to the Kirby 3.6 docs. The 3.5 docs are here:

Upload