How to use the file upload dialog in a custom Vue component

[gaufde]

Hi Nico,

Thanks for the detailed reply! This did a great job of pointing me in the right direction. I had looked the core files field a bit already but without context it didn’t make much sense.

Anyways, I have assembled something that appears to work! It took me some time to track down how to define the endpoints as a prop, but I’m guessing this is something that would be more familiar if I knew Vue.

<script>
export default {
  props: {
    endpoints: Object,
  },
  methods: {
    onUploadClick(event) {
      let options = {
        "accept": "*",
        "attributes": {},
        "files": [],
        "max": null,
        "multiple": false,
        "replacing": null,
        "url": this.$panel.urls.api + this.endpoints.model + "/fields/files/upload"
      }
      
      window.panel.upload.pick(options);

    }
  }
}
</script>

<template>
  <k-field :label="label">
    <k-button
      icon="upload"
      variant="filled"
      @click="onUploadClick"
    >
      Upload
    </k-button>
  </k-field>
</template>

Would you consider it to be best practice to use the default files endpoint by using "url": this.$panel.urls.api + this.endpoints.model + "/files" or the custom one for the files field at "url": this.$panel.urls.api + this.endpoints.model + "/fields/files/upload"? I tried both and I didn’t notice any immediate differences, but I’m guessing that the custom one would be better since it looks like it has extra methods and validation logic.

@distantnative

In general, components often are more the building blocks, but not always contain the logic itself. The upload dialog is an extreme case. Using the component alone, you would have to implement all/most of the logic that kirby/panel/src/panel/upload.js at main · getkirby/kirby · GitHub contains yourself. Which one could do, but of course doesn’t make much sense.

With dialogs in general, we are trying to move more away from using the dialog components directly in your other component template tags, but rather use panel.dialog.open() here, whether for backend-defined dialogs or just opening a dialog Vue component. The benefit here is that the Panel can jump in and handle a bunch of things as well that otherwise each developer would need to implement themselves.

I think I understand. Because dialogs in the Panel are so reliant on the surrounding logic that is required for them to function, this is a case where it is better to use the internal methods (Kirby Panel) rather than the components. So I guess I’m sort of operating in an awkward in-between where I don’t want to handle all of the uploading process myself, but I’m also not using/extending the fully-featured and built-in files field.

On this note, there is one other thing I was hoping to do in my file field; however, I’m worried that it might not be possible without even heavier modifications. What I’m hoping to do is to have the files begin to upload automatically as soon as files are chosen but still show the progress and errors in the dialog.

I tried setting "immediate": true, in my options that I pass to window.panel.upload.pick(options); However, this makes it so that upload dialog is never shown and I loose the progress indicators and error messages.

I did find that some others on the forum were trying to do something similar, but globally: Kirby 4 - Skip Fileupload Dialog - #4 by toebu

@toebu

panel.plugin('my-plugin/panel', {
  components: {
    'k-upload-dialog': {
      extends: 'k-upload-dialog',
      created() {
        // Submit immediately, we don't want this upload dialog...
        this.$emit('submit');
      },
    },
  },
})

I tried their solution shown above, and it does exactly what I hoped. However, I can’t see an easy way to replicate this behavior but keep it localized to my field without re-inventing the wheel so to speak.

I was hoping there would be a way for me to hook a callback into an event that happens right after the files are picked, so that then I could submit the dialog using window.panel.dialog.submit(). However, I couldn’t figure out a way to do that, so it seems like I would have to re-create parts of kirby/panel/src/panel/upload.js at main · getkirby/kirby · GitHub to achieve this, which probably isn’t worth it to save one click. Would you agree with my interpretation in this situation?