README
ckeditor5-file-upload
CKEditor5 File Upload Plugin
This plugin allows you to upload file that have mime type application/*.
Installation
npm i @ch-sridhar15/ckeditor5-file-upload
or
yarn add @ch-sridhar15/ckeditor5-file-upload
Usage
Update src/ckeditor.js with:
import FileUpload from "@ch-sridhar15/ckeditor5-file-upload/fileupload";
import SimpleFileUploadAdapter from "@ch-sridhar15/ckeditor5-file-upload/src/simplefileuploadadapter";
Editor.builtinPlugins = [
// ...
FileUpload,
SimpleFileUploadAdapter,
// ...
];
Editor.defaultConfig = {
// ...
simpleFileUpload: {
url: 'http://my-custom-link.com',
fileTypes: [
'.pdf',
'.doc',
'.docx',
'.xls',
'.xlsx'
]
},
toolbar: {
items: [
// ...
'fileUpload',
// ...
]
},
// ...
};
Then
npm run build
or
yarn build
How it works
The plugin creates a link entity inside editor content with an empty href attribute and when the upload process is completed the server response should contains an resourceUrl key which points to the uploaded file on the server. The value of the resourceUrl key will be added to the empty href attribute of the previously created link.
Communication protocol
When the file upload process starts, the adapter sends a POST request to config.simpleFileUpload.url.
Configuring allowed file types
Use the simpleFileUpload.url configuration option to define the allowed file MIME types that can be uploaded to CKEditor 5.
By default, users are allowed to upload pdf, doc, docx, xls, xlsx documents.
Upload file
When the file upload process is initiated, in the editor content appears a link with href attribute empty and text link corresponds to the uploaded file name.
Upload progress
This upload adapter will show users about the file upload progress with the help of a progress bar. The progress bar has a button to cancel the file upload process.
Upload complete
When the file has been successfully uploaded, the server should return an object containing the resourceUrl key which points to the uploaded file on the server. The value of the resourceUrl key will be added to the empty href attribute of the previously created link.