Adding laravel CSRF token with form data

Question

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 );
        }
    });
  }

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 1

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!

Answer 2

For ajax requests, I like to set it up once with $.ajaxSetup.

In my layout:

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

In my app.js:

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

This saves me having to remember to append the _token input to every request.

Answer 3

while @Saumya already answered this question, I use headers to send CSRF tokens like so:

$.ajax ({
  data: data,
  type: "POST",
  headers: {'X-CSRF-TOKEN': Laravel.csrfToken },
  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 );
    }
});  

If you are using ajax to send multiple requests throughout your application, you can set it up globally for every request at once:

$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': Laravel.csrfToken
}
});

Learn more Here