Imperavi article editor token missmatch while uploading image

Question

I don't usually post unless i get frustrated. I have been using Imperavi Article and unable to use it with VueJS. Following is the code for sending CSRF-TOKEN, but i keep getting error 419, token miss match. I am unable to solve this issue. I've tried every way possible and got exausted.

Following is my code.

<template>
    <div>
        <article-editor :config="configOptions" :name="name"></article-editor>
    </div>
</template>

<script>
export default {
    props: ["name"],
    data() {
        return {
            configOptions: {
                subscribe: {
                    "upload.before.send": function(event) {
                        var xhr = event.get("xhr");
                        var token = document.head.querySelector(
                            "[name=csrf-token]"
                        ).content;
                        xhr.setRequestHeader("X-CSRF-Token", token);
                    }
                },
                plugins: ["blockcode", "reorder"],
                editor: {
                    focus: true
                },
                image: {
                    upload: "/admin/blog/images/upload"
                }
            }
        };
    }
};
</script>

<style></style>

Here is the error im getting.

    "message": "CSRF token mismatch.",
    "exception": "Symfony\\Component\\HttpKernel\\Exception\\HttpException",

Answer 1

Try this

subscribe: {
            'autosave.before.send': function(event) {
                var xhr = event.get('xhr');
                xhr.setRequestHeader('X-CSRF-Token', '{{ csrf_token() }}');
            },
            'upload.before.send': function(event) {
                var xhr = event.get('xhr');
                xhr.setRequestHeader('X-CSRF-Token', '{{ csrf_token() }}');
            }
        }