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
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;
@ayoubben probably because of this: <meta name="csrf-token" content="{ { csrf_token() } }">
Change it to: <meta name="csrf-token" content="{{ csrf_token() }}">
Please or to participate in this conversation.