2

I want to store my images using ck editor. But it returns 419 http status even if I set csrf token to request header.

let token = document.head.querySelector('[name=csrf-token]').content,
document.querySelector('#article_editor').on('fileUploadRequest', function (evt) {
    var xhr = evt.data.fileLoader.xhr;
        xhr.setRequestHeader('Cache-Control', 'no-cache');
        xhr.setRequestHeader('X-File-Name', this.fileName);
        xhr.setRequestHeader('X-File-Size', this.total);
        xhr.setRequestHeader('X-CSRF-Token', token);
       xhr.send(this.file);

    // Prevented the default behavior.
       evt.stop()
});

How can I fix this ?

I already set csrf meta in between head tags. Despite this, I keep getting errors..

<head>
...
<meta name="csrf-token" content="{{ csrf_token() }}">
...
</head>
1

4 Answers 4

5

I had a similar issue. I did add the upload URL to VerifyCsrfToken.php (app/Http/Middleware). In this file, I added 'upload-image/'. This could solve your problem. However, posting data without CSRF could create risk.

1

Add this to your blade file:

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

In Js File add like this

simpleUpload: {
      uploadUrl: 'your_url?_token='+document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    }

For more details check this link: https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html

1

you should make like that:

 filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",
 filebrowserUploadMethod: 'form'
0

Just add in your blade:

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

Then in your simpleUpload config (if you use it):

simpleUpload: {
      uploadUrl: '/* your path */',
      headers: {
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
      }
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy