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

kikter's avatar

laravel CK editor image uploading isn't working

having issue with ck editor, followed some tutorials online and i tried uploading image , i am getting thie error from ckeditor saying cound not upload image also i tired embedding a youtube link after submitting the post its disappears in the post body here is my code below

my textarear blade view

   <form method="post" action="{{ route('thread.create')  }}" enctype="multipart/form-data">
                        @csrf
                        <div class="space-y-3">
                            
                             <div class="">
                        
                          
                           <textarea class="form-control" id="editor" name="editor"></textarea>
                        
                         
                        </div>
                    </form>

script

  <script>
      class MyUploadAdapter {
    constructor( loader ) {
        this.loader = loader;
    }
 
    upload() {
        return this.loader.file
            .then( file => new Promise( ( resolve, reject ) => {
                this._initRequest();
                this._initListeners( resolve, reject, file );
                this._sendRequest( file );
            } ) );
    }
 
    abort() {
        if ( this.xhr ) {
            this.xhr.abort();
        }
    }
 
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
 
        xhr.open( 'POST', "{{route('upload', ['_token' => csrf_token() ])}}", true );
        xhr.responseType = 'json';
    }
 
    _initListeners( resolve, reject, file ) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `Couldn't upload file: ${ file.name }.`;
 
        xhr.addEventListener( 'error', () => reject( genericErrorText ) );
        xhr.addEventListener( 'abort', () => reject() );
        xhr.addEventListener( 'load', () => {
            const response = xhr.response;
 
            if ( !response || response.error ) {
                return reject( response && response.error ? response.error.message : genericErrorText );
            }
 
            resolve( response );
        } );
 
        if ( xhr.upload ) {
            xhr.upload.addEventListener( 'progress', evt => {
                if ( evt.lengthComputable ) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            } );
        }
    }
 
    _sendRequest( file ) {
        const data = new FormData();
 
        data.append( 'upload', file );
 
        this.xhr.send( data );
    }
}
 
function MyCustomUploadAdapterPlugin( editor ) {
    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
        return new MyUploadAdapter( loader );
    };
}
 
ClassicEditor
    .create( document.querySelector( '#editor' ), {
        extraPlugins: [ MyCustomUploadAdapterPlugin ],
    } )
    .catch( error => {
        console.error( error );
    } );
    </script>

ck image controller

public function upload(Request $request)
{
    if($request->hasFile('upload')) {
        //get filename with extension
        $filenamewithextension = $request->file('upload')->getClientOriginalName();
  
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
  
        //get file extension
        $extension = $request->file('upload')->getClientOriginalExtension();
  
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
  
        //Upload File
        $request->file('upload')->storeAs('public/uploads', $filenametostore);
        $request->file('upload')->storeAs('public/uploads/thumbnail', $filenametostore);
 
        //Resize image here
        $thumbnailpath = public_path('storage/uploads/thumbnail/'.$filenametostore);
        $img = Image::make($thumbnailpath)->resize(500, 150, function($constraint) {
            $constraint->aspectRatio();
        });
        $img->save($thumbnailpath);
 
        echo json_encode([
            'default' => asset('storage/uploads/'.$filenametostore),
            '500' => asset('storage/uploads/thumbnail/'.$filenametostore)
        ]);
    }
}
0 likes
12 replies
sr57's avatar

@kikter

Only super hero (there are some here but can be busy) could understand your pb, I suggest you to simplify your code to a minimum describing your problem ...

... and doing that way, many chance that you'll find the solution by yourself.

kikter's avatar

@sr57 I have reduced some of the view code to only the CK textarea

kikter's avatar

@jlrdw

after checking all videos online was able to get it working on local server, the images is not showing on shared hosting i have also link the storage but still not working, but on localhost its working perfectly

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('media'), $fileName);

            $url = asset('media/' . $fileName);
            return response()->json(['fileName' => $fileName, 'uploaded'=> 1, 'url' => $url]);


         }
kikter's avatar

@jlrdw the images and post body are been saved to the database but the image isn't displaying

<script>
    ClassicEditor
        .create( document.querySelector( '#content' ), {
            ckfinder: {
                uploadUrl: '{{route('ckeditor.upload').'?_token='.csrf_token()}}'
            }
        },{
            alignment: {
                options: [ 'right', 'right' ]
            }} )
        .then( editor => {
            console.log( editor );
        })
        .catch( error => {
            console.error( error );
        })
</script>


 
jlrdw's avatar

If working on local, double check your folder structure and symbolic link. If you have pointed to public as document root, it should work the same as local.

I would also suggest starting a new post if you are having some specific trouble on shared hosting.

kikter's avatar

@jlrdw checking my public folder this code created a new folder outside the storage:link folder so in public I have to folders , I have deleted the storage folder and relink it again but still the same

media
storage 
anilkumarthakur60's avatar

Install step 1

 composer require unisharp/laravel-filemanager
 php artisan vendor:publish --tag=lfm_config
 php artisan vendor:publish --tag=lfm_public
 php artisan storage:link

step 2 add Route

 Route::group(['prefix' => 'laravel-filemanager', 'middleware' => ['web', 'auth']], function () {
     \UniSharp\LaravelFilemanager\Lfm::routes();
 });

update in your blade file

<textarea id="my-editor" name="content" class="form-control">{!! old('content', 'test editor content') !!}</textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
<script>
  var options = {
    filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
    filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token=',
    filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
    filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token='
  };
</script>

<script>
CKEDITOR.replace('my-editor', options);
</script>

update your APP_URL

saidu's avatar

@kikter i was have the same problem jxt add exit(); after the json_encode jxt leave every thing as it was when you first created this thread and add the exit() in the controller. i know this post is old but jxt incase anyone else is having the same issue

public function upload(Request $request)
{
    if($request->hasFile('upload')) {
        //get filename with extension
        $filenamewithextension = $request->file('upload')->getClientOriginalName();
  
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
  
        //get file extension
        $extension = $request->file('upload')->getClientOriginalExtension();
  
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
  
        //Upload File
        $request->file('upload')->storeAs('public/uploads', $filenametostore);
        $request->file('upload')->storeAs('public/uploads/thumbnail', $filenametostore);
 
        //Resize image here
        $thumbnailpath = public_path('storage/uploads/thumbnail/'.$filenametostore);
        $img = Image::make($thumbnailpath)->resize(500, 150, function($constraint) {
            $constraint->aspectRatio();
        });
        $img->save($thumbnailpath);
 
        echo json_encode([
            'default' => asset('storage/uploads/'.$filenametostore),
            '500' => asset('storage/uploads/thumbnail/'.$filenametostore)
        ]);
		exit();
    }
}
``
RajeshEzrado's avatar

The line

xhr.open( 'POST', "{{route('upload', ['_token' => csrf_token() ])}}", true ); should prevent this; take a look at the rendered HTML and make sure it's actually showing a token in there.

Please or to participate in this conversation.