Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

semicolon24's avatar

CRUD laravel with ckeditor 4 and upload image

I experienced a problem when I integrated Ckeditor 4 to upload images, in the CRUD form the problem was when I uploaded the image in the choose file section then clicked send it to the server and it showed 404 not found in the Ckeditor section. I couldn't find the part where the error occurred. I asked for help.

here is the code

this code create.blade :

  <div class="card table-responsive col-lg-10">
<div class="card-header">
    <a href="/mypost" class="btn btn-primary mb-3"> Back Post </a>
    <form action="/mypost/create" method="post" enctype="multipart/form-data">
        @csrf
        <div class="mb-3">
            <label for="title" class="form-label">Title</label>
            <input type="text" class="form-control" id="title" name="title" @error('title') is-invalid @enderror value="{{ old('title') }}">
            @error('title')
            <div class="invalid-feedback">
                {{ $message }}
            </div>
            @enderror
        </div>
        <div class="mb-3">
            <label for="slug" class="form-label">Slug</label>
            <input type="text" class="form-control" id="slug" name="slug" @error('slug') is-invalid @enderror value="{{ old('slug') }}">
            @error('slug')
            <div class="invalid-feedback">
                {{ $message }}
            </div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="categori" class="form-label">Category</label>
            <select class="custom-select form-select" name="category_id">
                @foreach ($categories as $cat)
                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-3">
            <label for="image" class="form-label">Post Image</label>
            <input class="form-control @error('image') is-invalid @enderror" type="file" id="image" name="image" input="image">
            @error('image')
            <div class="invalid-feedback">
                {{ $message }}
            </div>
            @enderror
        </div>

        <div class="form-group">
            <label for="body" class="form-label">Body :</label>
            @error('body')
            <p class="text-danger">{{ $message }}</p>
            @enderror

            <textarea input="body" type="hidden" id="body" name="body" class="form-control ckeditor"></textarea>

        </div>
        <button type="submit" class="btn btn-primary">Create Post</button>
    </form>
</div>
<script src="//cdn.ckeditor.com/4.22.1/full/ckeditor.js"></script>
<script>
CKEDITOR.replace('body', {
    filebrowserUploadUrl: "{{ route('mypost.upload').'_token'.csrf_token() }}",
    filebrowserUploadMethod: 'form'
});
</script>

and this controller :

     public function store(Request $request)
{
    $request->validate([
        'title' => 'required',
        'slug' => 'required|unique:posts',
        'category_id' => 'required',
        'image' => 'image|file|mimes:jpg,png',
        'body' => 'required',
    ]);

    $input = $request->all();

    if ($request->hasFile('image')) {
        $image = $request->file('image');
        $imageName = date('d-m-Y') . '.' . $image->getClientOriginalName();
        $path = public_path('/uploads/post');
        $image->move($path, $imageName);
        $input['image'] = $imageName;
    }

    $input['user_id'] = auth()->user()->id;
    $input['excerpt'] = Str::limit(strip_tags($request->body));
    $input['body'] = $request->body;

    Post::create($input);

    return redirect('/mypost')->with('success', 'Post success save!!');
}

	public function upload(Request $request)
	{
         if ($request->hasFile('upload')) 
		{
             $originName = $request->file('upload')->getClientOriginalName();
             $fileName = pathinfo($originName, PATHINFO_FILENAME);
             $extension = $request->file('upload')->getClientOriginalExtension();
             $fileName = $fileName . '_' . time() . '.' . $extension;

             $request->file('upload')->move(public_path('images'), $fileName);

             $CKEditorFuncNum = $request->input('CKEditorFuncNum');
             $url = asset('images/' . $fileName);
             $msg = 'Image uploaded successfully';
            $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg') 
            </script>";

          @header('Content-type: text/html; charset=utf-8');
          echo $response;
        }
   }
0 likes
9 replies
amitsolanki24_'s avatar

Check your form url action value and below url filebrowserUploadUrl: "{{ route('mypost.upload').'_token'.csrf_token() }}",

semicolon24's avatar

@amitsolanki24_

I added '?' in section '?_token'

and action value I think I have adjusted it to the web routes

this my routes

use App\Http\Controllers\MyPostController;

Route::get('mypost', [MyPostController::class, 'index'])->name('mypost.index');
Route::get('/mypost/create', [MyPostController::class, 'create'])->name('mypost.create');
Route::get('/mypost/{id}/show', [MyPostController::class, 'show'])->name('mypost.show');
Route::delete('/mypost/{id}/destroy', [MyPostController::class, 'destroy'])->name('mypost.destroy');
Route::post('/mypost/create', [MyPostController::class, 'store'])->name('mypost.store');
Route::post('mypost/upload', [MyPostController::class, 'upload'])->name('mypost.upload');

but after I added '?' in section '?_token'

the error that appears becomes - 419|page expired -

What things should I check and do to solve this?

1 like
amitsolanki24_'s avatar

@semicolon24

Go-to this path app\Http\Middleware\VerifyCsrfToken.php and add your url here like this

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array<int, string>
     */
    protected $except = [
        'mypost/upload', //here add your url (to disabled csrf token)
    ];
}
gych's avatar
gych
Best Answer
Level 29

@semicolon24 I wouldn't use this approach to exclude the url from CSRF verification, its not safe.

Check the docs so you know why you need CSRF protection https://laravel.com/docs/11.x/csrf

Try this instead

 filebrowserUploadUrl: '{{ route('mypost.upload').'?_token='.csrf_token() }}',
semicolon24's avatar

@gych I've already used that, haven't I?

filebrowserUploadUrl: "{{ route('mypost.upload').'_token'.csrf_token() }}",

gych's avatar

@semicolon24 No its not the same, compare your code with the code I've added above

This is the difference

My example

'?_token='

Your code

'_token'

If my previous example doesn't work then try this

 filebrowserUploadUrl: "{{ route('mypost.upload', ['_token' => csrf_token()]) }}",
gych's avatar

@semicolon24 No problem :) If this solved your issue, don't forget to close your thread by selecting the best answer.

Please or to participate in this conversation.