Hello,
I am trying to figure out how to use the k-upload-dialog in a custom Vue component I am making to implement a data importing feature in the Panel.
I started by looking at the docs at Kirby Panel, however that didn’t make much sense since the code example only shows:
<k-button icon="open" variant="filled" @click="openEmpty">
Open
</k-button>
After looking at some of the other examples, I ended up writing this in my Vue component:
<template>
<k-field class="k-doi-field" :label="label">
<k-button
icon="open"
variant="filled"
@click="
$panel.dialog.open({
component: 'k-upload-dialog',
})
"
>
Open
</k-button>
</k-field>
</template>
However, this does not work since the upload URL is missing. I asked about this on Discord, and @distantnative replied:
Instead of implementing the component etc., you likely want to rather use Kirby Panel
You can see the options and methods (pick or open most relevant for you). URL option is e.g. the URL to the API endpoint that handles the uploaded files.
Based on this feedback I have written:
<script>
export default {
methods: {
onUploadClick(event) {
let options = {
"accept": "*",
"attributes": {},
"files": [],
"max": null,
"multiple": true,
"replacing": null,
"url": null
}
window.panel.upload.open(options);
}
}
}
</script>
<template>
<k-field :label="label">
<k-button
icon="open"
variant="filled"
@click="onUploadClick"
>
Upload
</k-button>
</k-field>
</template>
However, I am still somewhat new to this so I don’t fully understand how all the pieces fit together.
In terms of creating a URL for the options object, the most promising thing I’ve found in the docs is the REST API endpoint for uploading a new file: <code>POST</code> /api/pages/:id/files | Kirby CMS, though I haven’t had a chance to test this since learning about it.
This is as far as I’ve gotten so far, so some more elaboration about the best way to use Panel components like the file upload dialog would be much appreciated!