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.