rakibtg rakibtg - 3 months ago 62
Javascript Question

Adding laravel CSRF token with form data

While uploading an image via wysiwyg editor I need to pass the Laravel CSRF token with the

. But it seems like it fails or it does not add the csrf token using the

Here is my code:

function uploadImage( image ) {
var data = new FormData();
data.append( "image", image );

data.append( "csrfToken", Laravel.csrfToken ); // <- adding csrf token
// Laravel.csrfToken will return the csrf token.

console.log( data.entries() );
$.ajax ({
data: data,
type: "POST",
url: "/article/store/image",
cache: false,
contentType: false,
processData: false,
success: function(url) {
var image = IMAGE_PATH + url;
$( '#editor' ).summernote( "insertImage", image );
error: function( data ) {
console.log( data );

enter image description here

Its not adding the laravel csrf token with the form data because still I am getting an error

TokenMismatchException in VerifyCsrfToken.php line 68

How to add the token with the form data?


You should add a field named - _token, instead of csrfToken like this:

data.append( "_token", Laravel.csrfToken ); // <- adding csrf token

This is what Laravel's helper method - csrf_field() does.

According to Laravel Docs, in case of Ajax calls - you could, for example, store the token in a HTML meta tag::

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

and then include in your ajax header like this:

   headers: {
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

Hope this helps!