How do we upload images inside Rich Text Editor (AKA: Document Field) ?

[siamekanto19]

Uploading images inside Rich Text Editors is very common in most other Headless CMS. But I can't seem to find the option to add Image Uploading functionality inside the Rich Text Editor of Keystonejs. Is there a way that I am not aware of or is it really not possible here?

[CanRau]

Also curious how that could work in Keystone 6, in v5 there was a Cloudinary package which also had a component block so it could be integrated with the former document field. Though I have no idea how to make a Component Block so that it can have side effects to upload files to some place (I would go with Backblaze's S3 compatible API)?
Uuh looks like it would need a component block with a custom field I guess 🤔

Any hint would be highly appreciated 🙏

[CanRau]

I kinda got something working uploading to Backblaze though I had to hard code environment variables as I've no idea how to read them, and also would be much better if I could figure out how to use the Keystone server to generate a pre-signed upload URL or even proxy the download as to not expose API keys¿?

Okay found a way to extend-express-app, so now working on an endpoint for the upload which can also take care of the env vars

Edit: got it working 😻 next up polishing and blog post

[musps]

Any solution?

[hhimanshu]

I am trying to reproduce what you did at hhimanshu/keystone-custom-document-fields#1

Your help to open and make it work is appreciated and will also help others in the Keystone community.
Thanks @CanRau

[hhimanshu]

@CanRau , what is running on your 127.0.0.1:8787? I see two references in your blog post about this

<img width="200" src={`http://127.0.0.1:8787/${file}`} key={file} />

[CanRau]

Sorry for the late response, it's running a Cloudflare Worker locally using wrangler which returns the corresponding file from a private Backblaze B2 bucket. So depending on your needs and setup you provide the URL to your file backend, could be minio, AWS S3 or whatever 😉
Hope that helps, right now I don't have time to look into your PR sorry, but I try to respond here a little quicker if you've got more questions.

Maybe could update my article to make that more clear when I find the time

[hhimanshu]

No worries, I will ask here.
So, when someone uploads a file, /api/upload is called and uploads the file to Backblaze server. Then, at the same time, you request the same file from server using 127.0.0.1:8787 (this is your proxy to Backblaze via Cloudflare). Is that understanding correct?

[CanRau]

Not exactly "at the same time" though as only files are being requested which you uploaded before that's why the proxy URL contains the ${file} at the end

[raveling]

Just to confirm the workarounds discussed here are currently the best way to get images in the document field.

We are working on a more seamless story for Keystone images in general that will have a positive impact on this topic as well.

[hhimanshu]

@raveling , as you are thinking in this direction, please include images, videos (as uploads, and embeds - YouTube, Vimeo) in your design considerations.
As you guys build on Slate, it would be nice to see how you can leverage what they provide already

https://www.slatejs.org/examples/images
https://www.slatejs.org/examples/embeds
Thanks

[hhimanshu]

Also, can I subscribe to the story the team is working on? Are there any planned milestones to achieve that?

[raveling]

please include images, videos (as uploads, and embeds - YouTube, Vimeo) in your design considerations.

these are already under consideration ✅

can I subscribe to the story the team is working on? Are there any planned milestones to achieve that?

currently our roadmap and announcements in the community Slack are the best resources for updates.

hope this helps!

[limegorilla]

@raveling Are there any updates to this? Currently there isn't anything in the roadmap that I can see that relate to this.

[proteye]

Hi all!
Here is my example of image uploader in document editor (Document Field): https://gist.github.com/proteye/b9fc465caeea474fef3873b7297d58ad

[alihesari]

I discovered an excellent example that demonstrates how to implement custom fields and user interfaces for uploading images, YouTube videos, Tweets, and more. You can find it here: KeystoneJS Document Field Customisation Example. This resource is particularly useful for those looking to extend the functionality of KeystoneJS in their projects.