ayoubben's avatar

Laravel ajax error 419

I'm trying to upload video file to database with ajax , but i keep getting error 419 i search for it i found that i need csrf token but already set it up i don't what the problem i couldn't fin any answer for my problem can someone help ?

meta tag :

    <meta name="csrf-token" content="{ { csrf_token() } }">

html code :

                    <div class="video-file-upld">
                        <label class="upld-inputs" for="movieVideo" id="movieLbFile">
                            <div class="title">upload video file</div>
                            <div class="btn">Upload Video</div>
                        </label>
                        <input type="file" name="video" id="movieVideo" class="file-upld-btn vid" accept="video/*">
                        <div class="prog-con" id="movieProCon">
                            <div class="prog-hld">
                                <div class="progress" id="movieUploadProgress">
                                    <div id="movieProgressCurrent" class="progress-current" style="width: 0%"></div>
                                </div>
                                <div class="value" id="movieUploadProgressCount">0%</div>
                            </div>
                            <div class="txt" id="movieStatus"></div>
                        </div>
                    </div>

ajax code :

        $(document).ready(function() {
            $('#movieVideo').on('change', function() {
                $('#movieProCon').css('display', 'block');
                var video = this.files[0];
                var formData = new FormData();
                formData.append('video', video);
                $.ajax({
                    url: '{{ route('file-upload') }}',
                    data: formData,
                    method: 'POST',
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function(data) {
                        var interval = setInterval(function() {
                            $.ajax({
                                url: `/dashboard/upload/file/video/${data.id}`,
                                method: 'GET',
                                success: function(dataProcessing) {
                                    $('#movieStatus').html('Processing');
                                    $('#movieProgressCurrent').css('width',
                                        dataProcessing.progress);
                                    $('#movieUploadProgressCount').html(
                                        dataProcessing.progress);
                                    if (dataProcessing.progress ==
                                        100) {
                                        clearInterval(interval);
                                        $('#movieStatus').html(
                                            'Done Processing');
                                        $('#movieProCon').css('display',
                                            'none');
                                        $('.video-file-upld').css('display',
                                            'none');
                                    }
                                },
                            });
                        }, 3000)
                        $('#videoFileId').val("");
                        $('#videoFileId').val(data.id);
                    },
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = Math.round(evt.loaded / evt
                                    .total * 100) + "%";
                                $('#movieProgressCurrent').css('width',
                                    percentComplete);
                                $('#movieUploadProgressCount').html(
                                    percentComplete);
                            }
                        }, false);
                        return xhr;
                    },
                    error: function(error) {
                        console.log("Error AJAX not working: " + error);
                    },
                });
            });
        });
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

controller code :

        $this->validate($request, [
            'video' => 'required|file|mimetypes:video/mp4,video/mpeg,video/x-matroska',
        ]);
        $original_name = $request->video->getClientOriginalName();
        $title = time() . '-' . $original_name;
        $video_file = $request->file('video');
        $video = VideoFile::create([
            'disk'          => 'videos_disk',
            'original_name' => $original_name,
            'path'          => $video_file->store('videos', 'videos_disk'),
            'title'         => $title,
        ]);
        $this->dispatch(new movieHandler($video));
        return $video;
0 likes
2 replies
neilstee's avatar
neilstee
Best Answer
Level 34

@ayoubben probably because of this: <meta name="csrf-token" content="{ { csrf_token() } }">

Change it to: <meta name="csrf-token" content="{{ csrf_token() }}">

1 like

Please or to participate in this conversation.