Listen to Panel Events in a custom Vue Component

Kirby 3 Solved ✅
1

Hi,

how can I listen to custom panel events in a Vue Component? Like “success” emitted by the stock KUpload component.

Thank you for any pointers!

2

Are we talking about your component using k-upload as child component? Or you want to listen – so to say – globally to any k-upload?

3

I’d like to listen to global events, i.e. to any k-upload.

4

There is no global event sent through the event bus for this. Only an event to the parent component. Please open an issue in https://github.com/getkirby/ideas/issues as a suggestion, if you need this (would be good to explain a concrete example what you would want this for).

5

After the user uploads a pdf document, I generate a preview in the background through a file.create:after hook. This preview will be shown in a custom . At the moment the user has to click an “update preview” button. It would be nice for the image to show up “magically”, once it has been generated …

If I’d use k-upload as a child in my own component I could simply listen to the event on the parent?

6

In that case, good news, there is a way:

The file sections emit a global event on file creation: this.$events.$emit("file.create");

You could subscribe to that and whenever its emitted, refresh your component, e.g.

created() {
  this.$events.$on("file.create", this.refresh);
},
destroyed() {
  this.$events.$off("file.create", this.refresh);
}
7

Thank you very much!

8

Hi,

how would i have to register this custom listener-component @distantnative @postscriptum ?

Best, Thomas

9

Not sure I fully understand your question. What I described was adding these event listeners to the Vue component in question. You want to create a Vue component just for listening? What shall it do with the event then?

10

as we are forcing our users to add the correct file credits the idea is to forward to the files detail page right after its upload. I enhanced the files field successfully and added a redirect to the page right after successful upload. With the files section this seems to be a lot harder and thus i thought about adding a component to just listen to this event and forward after upload … does that makes sense?

11

You could set up a custom section that doesn’t really render any UI but listens to and handles the event Sections | Kirby CMS

12

But what do you do when the users upload multiple files at once?

Maybe it would make more sense to display a warning in the files section when a file has no file credits set?