Hi, I really appreciate the amazing work done by yjs developers.
I’ve been trying to develop a real-time collaborative markdown editor using Yjs, YWebrtc, and YCodemirror.
I got stuck on how to share the images uploaded by a user. As YDoc isn’t being synced with other users if I try to convert the image blob(of size > 150kb) to data URI and add it to a YMap instance. Is there a better way to share image blobs with clients in a room?
Thank you!
you can also try inserting an image of size ~ 1mb in yjs.dev quill editor and the collaborative session just blow ups. I think this is a known issue.
I also understand that Yjs is built for syncing primitive types(not images). But I would really like to hear some ideas on how to make it possible… or are there any plans to handle syncing images in a future version?
In Relm, we use an ExpressJS server in conjunction with y-websocket, so we create a simple file upload service and then embed URLs in the Y.Doc.
Here’s the upload: https://github.com/relm-us/relm-v4/blob/main/server/server_http.js#L118
and download: https://github.com/relm-us/relm-v4/blob/main/server/server_http.js#L97
We use dropzone for the actual drag/drop and upload on the client side: https://github.com/relm-us/relm-v4/blob/main/src/svelte/Upload.svelte#L21
For WebRTC, can you use a datachannel to do something similar?