How to send document or images in group using plain javascript pusher chatkit

Question

I have my chat application ready using plain javascript and pusher Chatkit. Now I want to send files or images in chat in the message. how to achieve this feature.

Answer 1

Chatkit has sendMultipartMessage method which allows complex messages(attachment,URL etc). Example from the docs -

currentUser.sendMultipartMessage({
  roomId: myRoom.id,
  parts: [
    { type: "text/plain", content: "" },
    {
      type: "image/gif",
      url: "https://gfycat.com/failingforkedheterodontosaurus",
    },
    {
      file: document.querySelector("#attach").files[0],
      customData: { metadata: 42 },
    }
  ],
});

One tutorial that uses multipartMessaging - https://pusher.com/tutorials/multiple-attachments-chatroom#migrate-to-multipart-messages