Did you install the file browser plugin?
Apr 26, 2024
12
Level 1
developing image uploads with ckeditor 4
hello can anyone help me.. I'm making a create form by uploading an image in ckeditor 4 but when I click the image button there is no upload button only the image info, link, advanced display appears can anyone help how can I display the upload tab then I can choosefile and send it to servers? Following is the code that I worked on
My form Create
<div class="card">
<div class="card-body">
<a href="/pages" class="btn btn-success mb-3"> Back To Pages</a>
<div class="row">
<div class="col-12">
<form action="{{ route('pages.create') }}" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
@csrf
<div class="form-group">
<label>Page Category</label>
<select name="pages_category_id" class="form-control select2" style="width: 100%;" required>
<option selected="selected">Choose One</option>
@foreach ($pagesCategory as $pag)
<option value="{{ $pag->id }}"> {{ $pag->name }} </option>
@endforeach
</select>
</div>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Name" required @error('name') is-invalid @enderror value="{{ old('name') }}">
@error('name')
<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" placeholder="slug" @error('slug') is-invalid @enderror value="{{ old('slug') }}">
@error('slug')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group">
<label for="content" class="form-label">Content</label>
@error('content')
<p class="text-danger">{{ $message }}</p>
@enderror
<textarea input="content" name="content" id="content" class="form-control ckeditor" cols="30" rows="15"></textarea>
</div>
<div class="form-group">
<label for="image" class="form-label">Thumbnail</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>
<button type="submit" class="btn btn-success"><span class="fa fa-save"></span> Save</button>
</form>
</div>
</div>
</div>
</div>
<script src="//cdn.ckeditor.com/4.22.1/full/ckeditor.js"></script>
<script>
CKEDITOR.replace('content', {
filebrowserUploadUrl: "{{ route('pages.image').'?_token'.csrf_token() }}",
filebrowserUploadMethod: 'form'
});
</script>
My Controller
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('uploads/pages/content/'));
$CKEditorFuncNum = $request->input('CKEditorFuncNum');
$url = asset('uploads/pages/content' . $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;
}
}
And My Route
Route::get('pages', [PagesController::class, 'index'])->name('pages.index');
Route::get('/pages/create', [PagesController::class, 'create'])->name('pages.create');
Route::post('/pages/create', [PagesController::class, 'store'])->name('pages.store');
Route::get('/pages/{id}/edit', [PagesController::class, 'edit'])->name('pages.edit');
Route::get('/pages/image', [PagesController::class], 'upload')->name('pages.image');
Please or to participate in this conversation.