How to debug 419 (unknown status) on laravel?

I wanted to upload the video on my site using the vue.js component:

<template>
  <div class="panel-body">
        <input type="file" name="video" id="video" @change="fileInputChange" v-if="!uploading">

        <div class="alert alert-danger" v-if="failed">Something went wrong. Please try again.</div>

        <div id="video-form" v-if="uploading && !failed">
            <div class="alert alert-info" v-if="!uploadingComplete">
                Your video will be available at <a href="<a :href="videoUrl" target="_blank"></a>" target="_blank">/videos/</a>.
            </div>
            <div class="alert alert-success" v-if="uploadingComplete">
                Upload complete. Video is now processing. <a href="/videos">Go to your videos</a>.
            </div>

            <div class="progress" v-if="!uploadingComplete">
                <div class="progress-bar" v-bind:style="{ width: fileProgress + '%' }"></div>
            </div>

            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" class="form-control" v-model="title">
            </div>

            <div class="form-group">
                <label for="description">Description</label>
                <textarea class="form-control" v-model="description"></textarea>
            </div>

            <div class="form-group">
                <label for="visibility">Visibility</label>
                <select class="form-control" v-model="visibility">
                    <option value="private">Private</option>
                    <option value="unlisted">Unlisted</option>
                    <option value="public">Public</option>
                </select>
            </div>

            <span class="help-block pull-right"></span>
            <button class="btn btn-default" type="submit" @click.prevent="update">Save changes</button>

        </div>
    </div>

<script>
export default {
    data() {
        return {
            uid: null,
            uploading: false,
            uploadingComplete: false,
            failed: false,
            title: 'Untitled',
            description: null,
            visibility: 'private',
            saveStatus: null,
            fileProgress: 0
        }
    },
    computed: {
        videoUrl: function () {
            return this.$root.url + '/videos/' + this.uid
        }
    },
    methods: {
        fileInputChange() {
            this.uploading = true;
            this.failed = false;

            this.file = document.getElementById('video').files[0];

            this.store().then(() => {
                var form = new FormData();

                form.append('video', this.file);
                form.append('uid', this.uid);

                this.$http.post('/upload', form, {
                    progress: (e) => {
                        if (e.lengthComputable) {
                            this.updateProgress(e)
                        }
                    }
                }).then(() => {
                    this.uploadingComplete = true
                }, () => {
                    this.failed = true
                });
            }, () => {
                this.failed = true
            })
        },
        store() {
            return this.$http.post('/videos', {
                title: this.title,
                description: this.description,
                visibility: this.visibility,
                extension: this.file.name.split('.').pop()
            }).then((response) => {
                this.uid = response.json().data.uid;
            });
        },
        update() {
            this.saveStatus = 'Saving changes.';

            return this.$http.put('/videos/' + this.uid, {
                title: this.title,
                description: this.description,
                visibility: this.visibility
            }).then((response) => {
                this.saveStatus = 'Changes saved.';

                setTimeout(() => {
                    this.saveStatus = null
                }, 3000)
            }, () => {
                this.saveStatus = 'Failed to save changes.';
            });
        },
        updateProgress (e) {
            e.percent = (e.loaded / e.total) * 100;
            this.fileProgress = e.percent;
        }
    },
    ready() {
        window.onbeforeunload = () => {
            if (this.uploading && !this.uploadingComplete && !this.failed) {
                return 'Are you sure you want to navigate away?';
            }
        }
    }
}

And using the controller:

public function store(Request $request)
{

    $channel = $request->user()->channel()->first();

    $video = $channel->videos()->where('uid', $request->uid)->firstOrFail();

    $request->file('video')->move(storage_path() . '/video', $video->video_filename);

    $this->dispatch(new UploadVideo(
        $video->video_filename
    ));

    return response()->json(null, 200);
}

With route:

Route::post('/upload', 'VideoUploadController@store')->middleware('auth');

My app-video.blade.js

<script>
    window.Laravel = <?php echo json_encode([
        'csrfToken' => csrf_token(),
    ]); ?>

    window.codetube = {
        url: '',
        user: {
            id: ,
            authenticated: 
        }
    };

</script>

When i try to upload the video on the site i pick a message "Failed to load resource: the server responded with a status of 419 (unknown status)" I dont understand what is this and the reason of this, all my attempts to fix the bug by "google's" methods didn't help me. Please, help what to do?

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2FRfRi2
via IFTTT