rakibtg rakibtg - 6 days ago 7
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

FormData()
. But it seems like it fails or it does not add the csrf token using the
append()
method.

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?

Answer

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:

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

Hope this helps!

Comments