Create a file upload plugin

[tokuhirom]

I want to use callbackWs in my code, but I cant determine it's a public API or not. It's not listed on docs.kweb.io site.

[tokuhirom]

I want to write a code like this:

function makeImageUploadable(textAreaElementId, callbackId) {
    document.getElementById(textAreaElementId).addEventListener("paste", function (e) {
        const el = document.activeElement;
        for (let i = 0; i < e.clipboardData.items.length; ++i) {
            const item = e.clipboardData.items[i];
            console.log("onPaste: kind:", item.kind, "type:", item.type);

            if (item.kind === "text") {
                const [start, end] = [el.selectionStart, el.selectionEnd];
                el.setRangeText(item.getData("text"), start, end);
            } else if (item.kind === "file" && item.type.match(/^image\//)) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    console.log("Uploading image");
                    callbackWs(callbackId, e.target.result)
                };
                reader.readAsDataURL(item.getAsFile());
            }
        }
    });
}

[sanity]

callbackWs isn't intended for this kind of use as it may change.

I think the best approach is to create a KwebPlugin and override its appServerConfigurator function to create a Ktor route that handles the file upload. Here is an example of adding a route from another plugin. The plugin constructor should probably take a callback function to receive the uploaded data.

It would also require a browser-side function to handle sending the file.

If this plugin is created in a general enough way and you create a pull request, I'd be happy to add it to Kweb for others to use. If you're not sure if you can do this I can add it to my todo list but it may take a few days before I can get to it.

[tokuhirom]

Ah, implementing KwebPlugin is a good idea.

I tried to use this method for my product.

• https://github.com/tokuhirom/blog3/blob/main/src/main/resources/static/js/admin.js
• https://github.com/tokuhirom/blog3/blob/main/src/main/kotlin/blog3/admin/plugin/FileUploadPlugin.kt

And it works well. Thanks.

If this plugin is created in a general enough way and you create a pull request, I'd be happy to add it to Kweb for others to use. If you're not sure if you can do this I can add it to my todo list but it may take a few days before I can get to it.

...But, making plugin for general purpose uploading process is bit hard. Because, if my understanding is correct, kweb doesn't want to expose ktor's classes to kweb developers. As a result, if i make a plugin, i need to wrap a lot from ApplicationCall. And the uploading process in front end is very simple. just call window.fetch. Most of developers doesn't need the wrapper function :P

In summary, in my opinion, it would be more beneficial if this was provided in a form like a How-to document rather than being provided as a Plugin.

[sanity]

Glad that worked for you.

I don't have a problem exposing Ktor classes to Kweb developers, there are already some places it's exposed (like the plugin mechanism).

I'll give this some more thought, I have also been considering a "recipes" section of the user manual for this type of thing.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.