semicolon24's avatar

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');
0 likes
12 replies
gych's avatar

@semicolon24 Which steps did you take to install and configure the plugin? Where is it failing?

semicolon24's avatar

@gych

  1. download this plugins https://ckeditor.com/cke4/addon/filebrowser

  2. extrack filbrowser.zip

  3. move folder filebrowser to public project

  4. direct with script

     <script src="/filebrowser/plugin.js"></script>
     <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>
    
semicolon24's avatar

@gych This addition "filebrowserBrowseUrl: '/browser/browse.php' " doesn't work in my project either, ?

gych's avatar

@semicolon24 Do you already see the upload button?

You have to replace /browser/browse.php with the path of your own file browser or third party file manager like stated in the documentation.

Please or to participate in this conversation.