How to upload an Image while creating a Page in a Section Plugin

Plugins Kirby 3 plugin 🧩
,
7

below the so far solution, in case anyone needs it.
like said, we cannot use k-files-field, nor the select of k-upload, because it would instantly upload the file, but there is no page created yet, so that won’t work.
We have added a plain hidden input-file, and trigger them by click on the dropzone or add-button.
onDrop and onSelect we store the files and upload them via uploader.drop after creation of the page.

Important note:
To assign that file to the files-field of the new page, we have to wait for the onUploadSuccess and use the filename of the second argument. that can be slightly different, then the filename on select, because kirby can make some rename operations i.e. space to dash

<template>
    <section class="createpage-section">
        <fieldset class="k-fieldset">
            <k-grid>
                <k-column width="1/1">
                    <k-headline-field :label="headline" numbered="true" />
                </k-column>
                <k-column width="1/1">
                    <header class="k-field-header">
                        <label class="k-field-label">Image</label>
                        <k-button icon="add" @click="select">Add</k-button>
                    </header>
                    <k-dropzone @drop="onDrop">
                        <button data-layout="cards" type="button" class="k-empty" @click="select">
                            <span aria-hidden="true" class="k-icon k-icon-image">
                                <svg viewBox="0 0 16 16">
                                    <use xlink:href="#icon-image"></use>
                                </svg>
                            </span>
                            <p>{{ dropzoneText }}</p>
                        </button>
                    </k-dropzone>
                    <input ref="fileselect" type="file" style="display: none;" @change="onSelect" accept="image/*" />
                    <k-upload ref="uploader" @success="onUploadSuccess" />
                </k-column>
                <k-column width="1/4">
                    <k-button class="btn-create" icon="add" theme="none" @click="create(false)" type="submit">Create
                        Page
                    </k-button>
                </k-column>
            </k-grid>
        </fieldset>
    </section>
</template>

export default {
    data() {
        return {
            headline: '',
            title: 'test-message',
            dropzoneText: 'No Files selected',
            pagePath: null,
            files: null
        }
    },

    created() {
        this.load()
            .then(response => {
                this.headline = response.headline;
            });
    },

    methods: {
        create() {
            this.$api.post('pages/messages/children', {
                slug: this.$helper.slug(this.title),
                template: 'message',
                content: {
                    title: this.title
                }
            }).then(data => {
                this.pagePath = data.id.replace(/\//g, '+');
                if (this.files) {
                    this.upload();
                }
            });
        },

        select() {
            this.$refs.fileselect.click();
        },

        upload() {
            let url = this.$urls.api + '/' + this.$api.pages.url(this.pagePath, 'files')
            this.$refs.uploader.drop(this.files, {
                url: url,
                multiple: true,
            })
        },

        onSelect(e) {
            this.files = e.target.files;
            this.dropzoneText = this.files[0].name;
        },

        onDrop(files) {
            this.files = files;
            this.dropzoneText = this.files[0].name;
        },

        onUploadSuccess(files, data) {
            this.files = null;
            this.dropzoneText = 'No Files selected';
            this.$api.pages.update(this.pagePath, {
                img: data[0].filename
            })
        }
    }
};

This example does not yet take care of every error or multiple file selection and it uses hardcoded title, blueprint and paths.
Thanks again for your support @texnixe