This can be done by using (enabling and configuring): It is enabled by default in all official builds, but if you are customizing CKEditor 5, do not forget to include it. The image upload plugin must be enabled in the editor. To sum up, for the image upload to work in the rich-text editor, two conditions must be true: The good news is these tasks are handled transparently by the image upload plugin so you do not have to worry about them. For instance, images can be copied and pasted within the WYSIWYG editor (while the upload takes place) and all potential upload errors must be handled, too. Actually, the whole thing is more complicated. This is just an overview of the image upload process. It passes the URL (or URLs in case of responsive images) to the image upload plugin which replaces the src and srcset attributes of the image placeholder in the editor content. Once the file is uploaded, the upload adapter notifies the editor about this fact by resolving its Promise. When an image is deleted from the editor content before the upload finishes, it aborts the upload process.Displays the progress bar for each of them.While the images are being uploaded, the image upload plugin: the URL to the saved file) back to the file loader (or handle an error, if there was one). The role of the upload adapter is, therefore, to securely send the file to the server and pass the response from the server (e.g.The role of the file loader is to read the file from the disk and upload it to the server by using the upload adapter.The images are intercepted by the image upload plugin (which is enabled in all official editor builds).įor every image, the image upload plugin creates an instance of a file loader.
#Cxf file upload example update
It uses the FileRepository API to spawn upload adapter instances, triggers the image upload ( UploadAdapter.upload()) and finally uses the data returned by the adapter's upload promise to update the image in the editor content.īefore you can implement your own custom upload adapter, you should learn about the image upload process in CKEditor 5. This particular plugin handles user actions related to uploading images. when a file is dropped into the content) by uploading files to the server and updating the edited content once the upload finishes.
In other words, it tells you what methods your upload adapter class must have in order to work. See the "How does the image upload work?" section to learn more.Īn interface defining the minimal API required to create an upload adapter. when a file is dropped into the content), a new upload adapter instance is created.ĬKEditor 5 comes with some official upload adapters but you can also implement your own adapters. Upload adapters are used by other plugins like image upload to connect to the server and fetch the response. A bridge between the feature and the server. when the file is dropped into the content) to the moment the server returns a response to the requested upload.
#Cxf file upload example code
TermĪ piece of code (a class) that handles the image upload from the moment it is requested by the user (e.g. # Glossary of termsīefore we start, let’s make sure all terms used in this guide are clear. Check out the comprehensive Image upload overview to learn about other ways to upload images into CKEditor 5.