Handling media in chat apps

Question

In a chat application like MS Teams, we have the option to add both text and images together. And the images can be present in any order. Something like this -

Hello!
<Image1>
This is a message
<Image2>

I am thinking about how should we go about storing this data in a DB?

I think one way is to maybe store the data in a structured JSON format so that we can use it to render things on the UI in order. Something like this -

[
  { "type": "text", value: "Hello!" },
  { "type": "image", value: {"url": "link_to_the_image" } },
  { "type": "text", value: "This is a message" },
  { "type": "image", value: {"url": "link_to_the_image" } },
]

But here we have to make sure that we upload the file before and then use the url that we get after storing it. And this introduces a lot of handling on the client side.

Are there any other ways of handling this?

Thanks!

Answer 1

I think tokenisation is great like you suggested! I'm speculating that maybe having rich text markdowns would also suffice, like we do in github readmes with text and images. The output would be a single text doc with text and image-links.