Check your form url action value and below url filebrowserUploadUrl: "{{ route('mypost.upload').'_token'.csrf_token() }}",
Apr 2, 2024
9
Level 1
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;
}
}
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() }}',
Please or to participate in this conversation.