Comment by Stefan Dobre on "CKEditor5 Image Upload"

Discussion

CommentCKEditor5 Image Upload

Stefan Dobre

Jul 20, 2022

Thanks Louis again for the blog post! Great job!

If I may add just 2 suggestions:

apex.jQuery("#pFlowId").val() can be written as apex.env.APP_ID and apex.jQuery("#pInstance").val() as apex.env.APP_SESSION
There is no need to pollute the "Execute when Page Loads" attribute. That bit can more elegantly be done directly in the item's JS Init Code:
```
function(options){
  options.executeOnInitialization = editor => {
      editor.conversion.for...
  }
  return options;
}
```

And a couple more things that you may still have to think about:

The content probably won't only be viewed from within the editor. Chances are you'll wish to just render the HTML in a static or dynamic content region somewhere. How would you go about appending that session token then?
You will most likely encounter the concept of "posts" as you won't only be editing the same content each time. In that case, how will you link a post to its images? That is, if a post is deleted, how will you also delete its images?
Similarly, say a user uploads an image, but never actually submits the page. What happens to these "unsaved" images?

I still don't have an elegant solution for these problems, but they're worth thinking about.

- Stefan

This is a great post, thank you!

One thing you try to improve security is to have the POST Handler in an ORDS module secured using OAuth2. Use apex_web_service.oauth_authenticate to get a token and then include the following in the CKEditor initialization to pass the bearer token:

      withCredentials: true,
      headers: {Authorization: 'Bearer &P10_OAUTH_TOKEN.'}

Having the POST handler secured by OAuth2 also allows other services to use it, not just APEX.

Keep the GET image handler in an unsecured ORDS Handler. Generate a random token when you add the image to the table. Append the token as a query string parameter to the URL returned in the POST response e.g.

{
    "url": "example.com/ords/get_ck_image/file/10
}

This way, images included in the HTML will show in a classic report, etc. <img src="example.com/ords/get_ck_image/file/13

In the GET handler, include the token in the where clause:

select content_type, image
from ckeditor_images 
where id = :id
and image_token = :image_token

This isn't completely secure because someone could inspect the HTML and share the link. It does prevent people from trying to guess other image tokens though.

Thanks you Stefan Dobre for taking the time to read and comment on it! First of all, I just updated the post with your two suggestions, by the way thanks for the executeOnInitialization, I hadn't seen that attribute.

To display images outside of CKEditor, I would opt for a replace function that will add the session token (I added a classic report on the blog example).

To add an uploaded image to a "post", we can use the CKEditor API to be able to create an image element from a stored image (example added as well).

If a post is deleted or the page is not submitted, I would let the user decide if he wants to delete the file or not. An interesting approach could be to create an APEX automation to check if a file is used in a post or not and delete it (based on the upload date, for example after 30 days).

I will update the post with these ideas soon.

Search Hashnode