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?

What Laravel.csrfToken returns?

Saumya Rastogi
– Saumya Rastogi

2016-11-29 13:30:02 +00:00
Commented Nov 29, 2016 at 13:30 — Saumya Rastogi
– Saumya Rastogi, Commented Nov 29, 2016 at 13:30
@SaumyaRastogi just the token string.

rakibtg
– rakibtg

2016-11-29 13:30:18 +00:00
Commented Nov 29, 2016 at 13:30 — rakibtg
– rakibtg, Commented Nov 29, 2016 at 13:30

Saumya Rastogi · Accepted Answer · 2016-11-29 13:39:02Z

13

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!

edited Nov 29, 2016 at 13:39

answered Nov 29, 2016 at 13:31

Saumya Rastogi

13.8k5 gold badges45 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Corry · Accepted Answer · 2016-11-29 13:35:33Z

3

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.

answered Nov 29, 2016 at 13:35

John Corry

1,57712 silver badges15 bronze badges

Comments

rahul · Accepted Answer · 2016-11-29 13:41:55Z

2

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

answered Nov 29, 2016 at 13:41

rahul

5064 silver badges17 bronze badges

Collectives™ on Stack Overflow

Adding laravel CSRF token with form data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related