Ckeditor5: Upload adapter for inlining images using base64 URLs

[Reinmar]

Is this a bug report or feature request? (choose one)

🆕 Feature request

📃 Other details that might be useful

It should be fairly easy (if not trivial) to write a simple upload adapter which inlines files as base64 encoded URLs.

We might either release it (even as a part of ckeditor5-upload, because it's so generic) or simply keep in the docs as a snippet. @oleq will be working on a deep dive guide on how to write custom upload adapters and this can be one of the options shown there (the other should be a normal upload adapter).

[Reinmar]

@f1ames will be able to help with how to write it

[f1ames]

I created a snippet with Base64UploadAdapter - https://gist.github.com/f1ames/f0d154e2a1fbeefcac5bb4dff20920ec. It works the same as regular adapter and can be used instead of it, but ofc it does not upload the file but transforms it into base64 string. Tested it with our image upload editing pipeline and it works fine 👍

@Reinmar I can transform it into a plugin or add to existing one? (I think it could be useful for people without upload which still would like to preserve images).

---

The Base64UploadAdapter still needs a File instance to be provided to inline it into base64 string (so works fine with our image dialog or dropping images). Still if image with different type of source lands in the content (blob:, http://) it will not be handled. I was just curious if we could have something like UrlReader (which reads an URL to a File instance) which can be integrated with Base64UploadAdapter or any other upload adapter (basically with image upload pipeline). Quick PoC - https://gist.github.com/f1ames/7876b2a18d89d9eb5f9719e98dd60de3 (based ofc on our FileReader). Funny thing I have realised it could be used for a same thing which was introduced in "_Support for uploading images with base64 source_" PR in ckeditor5-image https://github.com/ckeditor/ckeditor5-image/pull/248, but represents quite different approach (ofc needs some changes in image upload pipeline to be integrated).

[oleq]

TBH I'm for making it a guide section first, especially that the code is very short and I've never seen anyone requesting this kind of feature.

We could create 2 sub-sections under this one https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html#implementing-a-custom-upload-adapter like "Upload to the server" (with the current one) and "Base64–encoded inline content" (with the new one).

[coslac]

Hello everyone.

How do I set up this upload adapter for inlining images on my angular project? I'm using CKEditor5.

[manyaml]

is there an example to use Base64UploadAdapter or any documentation?

[f1ames]

@manyaml see the first gist from this https://github.com/ckeditor/ckeditor5/issues/1378#issuecomment-442762911.

[Nothing-Works]

@f1ames hi thank you for sharing the gist from #1378(comment)
just one thing I noticed that when I tried it out, this.loader.file is not File, it's Promise.

I can not put it in reader.readAsDataURL() .

And I do not think we can use async and await because of the UploadAdapter interface .

so I have to do something like this

this.loader.file.then( file => new Promise( (resolve, reject)=>{
       .................................................................................
             reader.readAsDataURL( file );
} ) )

correct me if I am wrong, or did I miss something?