How can I process an XHR POST request in a Kirby 2 plugin in my route?

Kirby 2 Questions šŸ¤”
1

How can I process an XHR POST request in a Kirby 2 plugin in my route?

I see the request header and the data the browser, and the response (is always fine 200 ok), but nothing happens on the server side.

Iā€™m using an API here - more specifically, itā€™s about filepond.

The boilerplate of the filepond runs without any problems, but in Kirby I do not get the curve - wie man in englisch so schƶn sagt :smiley: Does anyone have an idea? - Mercy.


2

Could you please post your code?

Ouur forum language is English, btw. so it would be great if you could stick to English, thank you :slightly_smiling_face:

3

The Script located in the Kirby template, following the filepond boilertemplate:

This is my Form:

    <form action="<?= AHA_HOST ?>student/abhakliste/filepond/" method="post" enctype="multipart/form-data">
        <input type="file" name="filepond[]" multiple>
        <button type="submit">Submit</button>
    </form>

This is the route from the plugin:

kirby()->routes(
    array(
        array(
            'pattern' => 'student/abhakliste/filepond',
            'method' => 'POST',
            'action' => function () {
                include (__DIR__.DS.'filepond-api'.DS.'submit.php');
                // TODO den Rest mĆ¼sste die API machen...
            },
        ),  ...

The upload consists of two parts, first an XHR request, with which the files are loaded onto the server when dropped in filepond and stored in a temporary directory. Then second a normal Form Post via submit button that would probably work, because the above route is called, and fails because in the first step, nothing was loaded into the temporary directory.

(Ps. My plan is to do step two also via XHR Request, to get rid of the submit button)

4

And the Script part which inits filepond

<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js">
</script>
<script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>

<script>
$(document).ready(function() {
    FilePond.registerPlugin(
        FilePondPluginFileValidateSize,
        FilePondPluginImageExifOrientation,
        FilePondPluginImageCrop,
        FilePondPluginImageResize,
        FilePondPluginImagePreview,
        FilePondPluginImageTransform
    );
    FilePond.setOptions({
        maxFileSize: '5MB',
        imageCropAspectRatio: '1:1',
        imageResizeTargetWidth: 300,

        // upload to this server end point
        server: 'https://devfak.carsten-nichte.de/student/abhakliste/filepond/'
    });
    var pond = FilePond.create(document.querySelector('input[type="file"]'));
});
5

I have modified my routes slightly, following the API instructions:

https://pqina.nl/filepond/docs/patterns/api/server/

I have added the Server Optionsā€¦ process and revertā€¦
The ā€œprocessā€ path changed the behavior slightly - there is now an additional XHR Request which contains the image dataā€¦ but the temp files are also not createdā€¦
By The way: all upload folders are in place with chmod 777.

FilePond.setOptions({

    // maximum allowed file size
    maxFileSize: '5MB',

    // crop the image to a 1:1 ratio
    imageCropAspectRatio: '1:1',

    // resize the image
    imageResizeTargetWidth: 300,

    // upload to this server end point
    server: {
        url:'https://devfak.carsten-nichte.de/student/abhakliste/filepond',
        process: '/process',
        fetch: null,
        revert:'/revert'
    }
});

The routes are now:

kirby()->routes(
        array(
            array(
                'pattern' => AHA_URL_BASE . 'filepond',
                'method' => 'POST',
                'action' => function () {
                    include(__DIR__ . DS . 'filepond-api' . DS . 'submit.php');
                },
            ),
             array(
                'pattern' => AHA_URL_BASE . 'filepond/process',
                'method' => 'POST',
                'action' => function () {
                    include(__DIR__ . DS . 'filepond-api' . DS . 'submit.php');
                }
            ),
             array(
                'pattern' => AHA_URL_BASE . 'filepond/revert',
                'method' => 'GET',
                'action' => function () {
                    include(__DIR__ . DS . 'filepond-api' . DS . 'submit.php');
                    // TODO den Rest mĆ¼sste die API machen...
                },
            ),...