Panel Plugin Dropzone in Kirby 5

Resources Plugins
1

I have a panel plugin panel that worked fine before Kirby 5.
I’ve been using Breaking changes | Kirby CMS for updating everything to work on Kirby 5 but I can’t make the dropzone to work.

Currently my code is the following:

<k-dropzone @drop="uploadDropzone">
    <k-box
        theme="empty"
        text="Drag files here …"
        icon="file-spreadsheet"
        height="5rem"
        align="center"
    />
</k-dropzone>

uploadDropzone(files) {
    this.$refs.uploadDropzone.drop(files, {
        url: window.panel.api +"/" +this.$api.pages.url(this.$panel.view.path, "files"),
        accept: "text/csv",
        multiple: false,
    });
}

And when I drop a file on the dropzone I get the following error in the console:

TypeError: this.$refs.uploadDropzone.drop is not a function

Any help? Thanks!!!

2

What are you actually trying to do? When a file is dropped on the dropdown your method is called… but then you are trying to retrigger the drop method again? This has two issues: your never define what is the ref you are calling (that’s why you get that error). But from the naming I assume that ref is supposed to be the dropdown element, but then you would create an endless loop: the dropdown is calling your method which is calling the drop method of the dropzone again?

3

Thanks for your answer! To add more context, basically, what I want to do is to have a field where a csv file can be uploaded and then enables a button that when clicking it pages will be created from that csv.

I managed to get to a different result with

window.panel.upload.open({
        "accept": "text/csv",
        "multiple": false,
        "files": files,
        "url": window.panel.urls.api + "/" + this.$panel.view.path + "/files"
      });

So when dropping a file now, the file the pop up is open but I guess something is wrong with how the files are being passed because the extension is not splitted and the upload fails.

image
image735×285 11 KB

I tried with window.panel.upload.pick and the upload works but I don’t know how to update the dropzone with the file info after the upload is done.

4

It’s quite advanced, so we won’t be able to implement this step by step with you. But taking a closer look at the files field will probably give you some pointers: kirby/panel/src/components/Forms/Field/FilesField.vue at main · getkirby/kirby · GitHub

E.g. you’ll likely need to define an on.done listener for $panel.upload where you can retrieve the uploaded files and then do what you need to do within the context of your field.

Another option could be to not rebuilt the whole files upload/select logic, but create your new field based on the existing files field. I did this for a CSV display field: GitHub - distantnative/kirby-csv-field: Kirby CMS Panel field to upload and display a single CSV file

5

Thanks @distantnative, your message guided me in the right direction. This is what I end up doing and it’s working :slight_smile:

<k-field label="Upload CSV">
    <k-button icon="upload"
        size="xs"
        slot="options"
        variant="filled"
        @click="upload">
        Upload
    </k-button>
    <k-dropzone ref="myDropzone"
        @drop="drop"
        v-if="!uploadSuccesful">
        <k-box
        theme="empty"
        text="Drag file here…"
        icon="file-spreadsheet"
        align="left"
        />
    </k-dropzone>
    
    <k-item
        v-else
        :text="this.fileName"
        info=""
        
        :options="[{ icon: 'trash', click: 'remove' }]"
        @action="deleteFile"
    /> 
</k-field>

// Dropzone and Upload methods
uploadOptions() {
    const options = {
        accept: "text/csv",
        multiple: false,
        url: window.panel.urls.api + "/" + this.$panel.view.path + "/files",
    };
    return {
        ...options,
        on: {
            done: async (files) => {

                if (options.multiple === false) {
                    options.selected = [];
                }

                // send the input event
                // the content object gets updated
                this.onSuccess(files);

                // the `$panel.content.update()` event sends
                // the updated form value object to the server
                await this.$panel.content.update();
            },
        }
    };
},
upload() {
    this.$panel.upload.pick(this.uploadOptions());
},
drop(files) {
    this.$panel.upload.open(files, this.uploadOptions())
},
onSuccess(event) {
    console.log(event);
    this.uploadSuccesful = true;
    var fileData = event[0];
    this.fileName = fileData.filename;
},
deleteFile(type) {
    console.log(type);
    switch (type) {
        case "remove":
            var pageUri = this.$panel.view.path.replace('pages/', '');
            var delUrl = "myplugin/deletefile/" + pageUri + "/" + this.fileName;
            this.$api.delete(delUrl);

            this.uploadSuccesful = false;
            break;
    }
}
1 Like