Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 476
rakibtg Avatar asked Dec 05 '22 16:12

rakibtg


2 Answers

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!

like image 117
Saumya Rastogi Avatar answered Dec 25 '22 16:12

Saumya Rastogi


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.

like image 26
John Corry Avatar answered Dec 25 '22 18:12

John Corry