Upload files using CKeditor

Question

I am using ckeditor and I am trying to upload file. This is my code:

    @extends('app')
@section('header')
<script type="text/javascript" src="{{url('ckeditor/ckeditor.js')}}"></script>
@endsection
@section('content')
<div class="container">

    @include('common.errors')
<div class="row">
                <div class="col-lg-12">

                            <div class="row">
                                <div class="col-lg-9">
    {!! Form::model($info, ['route' => ['infos.update', $info->id], 'method' => 'patch','files' => true]) !!}

        @include('infos.fields')

    {!! Form::close() !!}
    </div>
    </div>
    </div>
    </div>
</div>
@endsection
@section('footer')
<script type="text/javascript">
    CKEDITOR.replace('editor1',{

        filebrowserImageUploadUrl : "{{route('infos.upload')}}",
        filebrowserWindowWidth  : 800,
        filebrowserWindowHeight : 500
    });
    window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);
</script>
@endsection

Whenever I try to upload file, I get token mismatch error. The form builder automatically adds a hidden csrf field in the main form but since the file upload(POST request) from ckeditor happens through ajax it is giving me that error. I know that I can disable this error but when I googled I found out that it was a bad practise to disable it. How can I stop getting this error and upload files?

Answer 1

Ok so I finally got it working. I send the csrf token with the request.

filebrowserImageUploadUrl : "{{route('infos.upload',['_token' => csrf_token() ])}}",

Answer 2

Fixed the Csrf issue with the code below:

<script type="text/javascript">
CKEDITOR.replace('editor1',{

    filebrowserImageUploadUrl : "{{ url('your_url?_token='.csrf_token()) }}",

});
</script>