Try this solution. You can also follow this tutorial which helped me: https://www.youtube.com/watch?v=hufhhf2MSHU
class MyUploadAdapter {
constructor(loader) {
// The file loader instance to use during the upload.
this.loader = loader;
}
// Starts the upload process.
upload() {
return this.loader.file
.then(file => new Promise((resolve, reject) => {
this._initRequest();
this._initListeners(resolve, reject, file);
this._sendRequest(file);
}));
}
// Aborts the upload process.
abort() {
if (this.xhr) {
this.xhr.abort();
}
}
// Initializes the XMLHttpRequest object using the URL passed to the constructor.
_initRequest() {
const xhr = this.xhr = new XMLHttpRequest();
xhr.open('POST', '{{route("image-upload")}}', true);
xhr.setRequestHeader('x-csrf-token', '{{ csrf_token() }}');
xhr.responseType = 'json';
}
// Initializes XMLHttpRequest listeners.
_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({
default: response.url
});
});
if (xhr.upload) {
xhr.upload.addEventListener('progress', evt => {
if (evt.lengthComputable) {
loader.uploadTotal = evt.total;
loader.uploaded = evt.loaded;
}
});
}
}
// Prepares the data and sends the request.
_sendRequest(file) {
// Prepare the form data.
const data = new FormData();
data.append('upload', file);
// Send the request.
this.xhr.send(data);
}
}
function SimpleUploadAdapterPlugin(editor) {
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
// Configure the URL to the upload script in your backend here!
return new MyUploadAdapter(loader);
};
}
ClassicEditor.create(document.querySelector('#description_editor'), {
extraPlugins: [SimpleUploadAdapterPlugin]
})
.then(editor => {
editor.setData(document.querySelector('#description').value);
editor.model.document.on('change:data', () => {
document.querySelector('#description').value = editor.getData();
})
}).catch(error => {
console.error(error);
});
<div class="mb-3">
<label for="description" class="form-label">{{__('strings.description')}} <span class="text-danger">*</span></label>
<div class="ck-editor" id="description_editor"></div>
<textarea name="description"
class="form-control @error('description') border-red-500 @enderror mt-1 rounded-md ms-2"
id="description"
aria-describedby="descriptionHelp"
placeholder="" required hidden></textarea>
@error('description')
<div id="descriptionHelp" class="form-text">{{ $message }}</div>
@enderror
</div>