How to fix error 419 when uploading files via vue.js in Laravel?

Question

Laravel

There is an ExampleComponent.vue component for uploading files, which sends a post request to /upload

<template>
    <vue-clip :options="options" class="uploader">
        <template slot="clip-uploader-body" slot-scope="props">
            <div class="uploader-files">
                <div class="uploader-file" v-for="file in props.files">
                    <div class="file-avatar">
                        <img v-bind:src="file.dataUrl" alt="">
                    </div>
                    <div class="file-details">
                        <div class="file-name">
                            {{file.name}}
                        </div>
                        <div class="file-progress" v-if="file.status !== 'error' && file.status !== 'success'">
                            <span class="progress-indicator" v-bind:style="{width: file.progress +'%'}"></span>
                        </div>
                        <div class="file-meta" v-else="">
                            <span class="file-size">{{file.size}}</span>
                            <span class="file-status">{{file.status}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template slot="clip-uploader-action">
            <div class="uploader-action">
                <div class="dz-message">
                    Drop your files here or browse
                </div>
            </div>
        </template>
    </vue-clip>
</template>

<script>
    export default {
        name: 'app',
        data: function () {
            return {
                options: {
                    url: '/upload',
                    paramName: 'file',
                }
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

The route is defined in web.php:

Route::post('/upload',function (\Illuminate\Http\Request $request){
    $path = $request->file('file')->store('files');
    return 'success';
});

As a result, it gives a 419 error, csrf token is present in the template header.

Tell me please, what could be the problem?
Update: In options after paramName: 'file' you need to add headers: window.axios.defaults.headers.common
Thanks to everyone who helped :)

Answer 1

Access rights to the folder where it is written - what? (chmod 666?) A 403 error might pop up though.
And yes, you don't specify csrf in the file upload.
Can I have your piece of code that is responsible for sending ?

let formData = new FormData()
            formData.append('file', this.file)
            axios.defaults.xsrfCookieName = 'csrftoken'
            axios.defaults.xsrfHeaderName = 'X-CSRFToken'
            axios.post('http://' + window.location.host + '/api/tokens_VMP_excel/',
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    onUploadProgress: function (progressEvent) {
                        this.uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
                    }.bind(this)
                }
            ).then(function (response) {
                if (response.status === 204) {
                    self.is_completed = true
                }
            }).catch(function (error) {
                console.log(error);
            });

This is what mine looks like, how about yours?