ClassicEditor
.create( document.querySelector( '#editor' ), {
simpleUpload: {
// The URL that the images are uploaded to.
uploadUrl: 'http://localhost/abc/upload',
// Enable the XMLHttpRequest.withCredentials property.
withCredentials: true,
// Headers sent along with the XMLHttpRequest to the upload server.
headers: {
'X-CSRF-TOKEN': 'CSRF-Token',
Authorization: 'Bearer <JSON Web Token>'
}
}
} )
.then( editor => {
window.editor = editor;
editor.enableReadOnlyMode("button-edit");
editor.ui.view.toolbar.element.style.display = 'none';
} )
.catch( error => {
console.error( error );
} );
`
But when I try to upload the image, the browser gives me an error "Can't upload filename". No errors in the console.log whatsoever, but the Apache's access.log gives these strange two lines:
Build: 8p3cild9cwql-nohdljl880ze
I used CKeditor5 online build tool and included SimpleUploadAdapter. Here is the source of ckeditor.js:
`/**
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat'; import { Bold, Code, Italic } from '@ckeditor/ckeditor5-basic-styles'; import { BlockQuote } from '@ckeditor/ckeditor5-block-quote'; import { CodeBlock } from '@ckeditor/ckeditor5-code-block'; import type { EditorConfig } from '@ckeditor/ckeditor5-core'; import { Essentials } from '@ckeditor/ckeditor5-essentials'; import { FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font'; import { Heading } from '@ckeditor/ckeditor5-heading'; import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload } from '@ckeditor/ckeditor5-image'; import { Indent } from '@ckeditor/ckeditor5-indent'; import { Link, LinkImage } from '@ckeditor/ckeditor5-link'; import { List } from '@ckeditor/ckeditor5-list'; import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed'; import { Paragraph } from '@ckeditor/ckeditor5-paragraph'; import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office'; import { SourceEditing } from '@ckeditor/ckeditor5-source-editing'; import { Table, TableToolbar } from '@ckeditor/ckeditor5-table'; import { Undo } from '@ckeditor/ckeditor5-undo'; import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';
// You can read more about extending the build with additional plugins in the "Installing plugins" guide. // See https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html for details.
class Editor extends ClassicEditor { public static override builtinPlugins = [ AutoImage, Autoformat, BlockQuote, Bold, Code, CodeBlock, Essentials, FontColor, FontFamily, FontSize, Heading, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, Italic, Link, LinkImage, List, MediaEmbed, Paragraph, PasteFromOffice, SimpleUploadAdapter, SourceEditing, Table, TableToolbar, Undo ];
}
export default Editor;`
And I am using it in html, here is the code:
`
`
But when I try to upload the image, the browser gives me an error "Can't upload filename". No errors in the console.log whatsoever, but the Apache's access.log gives these strange two lines:
127.0.0.1 - - [23/Apr/2024:08:52:53 +0300] "POST /abc/upload HTTP/1.1" 301 239 127.0.0.1 - - [23/Apr/2024:08:52:53 +0300] "GET /abc/upload/ HTTP/1.1" 200 696
I set upload directory permission to 777. What could be the problem here?
Thanks!