React v6 UIKit: Sending Media Messages with Server-Hosted Files in CometChat

[chetan]

Guide Overview:

In this guide, we’ll walk through how to send media messages in CometChat by passing a deployed file URL using the sendMediaMessage method. Instead of directly sending a raw file object, you’ll first upload the file to your server or cloud storage, retrieve the file URL, and then use that URL to create and send a media message.

To implement this, you first need to override the default attachment options by defining your own using CometChatMessageComposerAction.

Each custom attachment option should include:

• A unique id
• A title to display in the UI
• An iconURL to represent the attachment type
• An onClick function where you can implement your custom logic

Inside the onClick handler, you can handle your own logic — such as passing a deployed file or image URL and use it to send a media message via CometChat.

Once you’ve defined these actions, simply pass them to the CometChatMessageComposer using the attachmentOptions prop.

This gives you full flexibility to trigger media messages using any external or pre-uploaded file URLs.

You need to override the attachment options as follows:

function getAttachments() {
  return [
    new CometChatMessageComposerAction({
      id: "SendImage",
      title: "Send an Image",
      iconURL: "https://img.icons8.com/ios-glyphs/30/image.png",
      onClick: () => {
        const imageURL = "<Your Deployed Url Here>"; //Your deployed image URL here
        sendMediaMessageWithDeployedURL(imageURL, CometChat.MESSAGE_TYPE.IMAGE);
      }
    }),
    new CometChatMessageComposerAction({
      id: "SendFile",
      title: "Send a File",
      iconURL: "https://img.icons8.com/ios-glyphs/30/send-file.png",
      onClick: () => {
        const fileURL = "<Your Deployed Url Here>"; //Your deployed file URL here
        sendMediaMessageWithDeployedURL(fileURL, CometChat.MESSAGE_TYPE.FILE);
      }
    }),
    new CometChatMessageComposerAction({
      id: "SendVideo",
      title: "Send a Video",
      iconURL: "https://img.icons8.com/material-outlined/50/video.png",
      onClick: () => {
        const videoURL = "<Your Deployed Url Here>"; //Your deployed video URL here
        sendMediaMessageWithDeployedURL(videoURL, CometChat.MESSAGE_TYPE.VIDEO);
      }
    }),
    
  ];
}

Update your CometChatMessageComposer as follows:

<CometChatMessageComposer
attachmentOptions={getAttachments()}
user={userObj}
/>;

To send a media message using a deployed file URL, you can create a reusable utility function called sendMediaMessageWithDeployedURL. This function takes the deployed file URL and the message type (IMAGE, VIDEO, AUDIO, or FILE) as parameters, and internally creates a CometChat.MediaMessage using a virtual file reference.

Create utility function as follows:

  const sendMediaMessageWithDeployedURL = (url: string, messageType: string) => {
        try {
            
            const fileName = url.split('/').pop() || 'file';
            const extension = fileName.split('.').pop() || '';
            
          
            let mimeType = '';
            switch (messageType) {
                case CometChat.MESSAGE_TYPE.IMAGE:
                    mimeType = 'image/jpeg';
                    break;
                case CometChat.MESSAGE_TYPE.VIDEO:
                    mimeType = 'video/mp4';
                    break;
                case CometChat.MESSAGE_TYPE.AUDIO:
                    mimeType = 'audio/mp3';
                    break;
                case CometChat.MESSAGE_TYPE.FILE:
                default:
                    mimeType = 'application/octet-stream';
                    break;
            }

            const file = {
                name: fileName,
                extension: extension,
                mimeType: mimeType,
                url: url
            };

            const attachment = new CometChat.Attachment(file);
            const receiverID = user?.getUid() || group?.getGuid() || "";
            const receiverType = user ? CometChat.RECEIVER_TYPE.USER : CometChat.RECEIVER_TYPE.GROUP;
            
            const mediaMessage = new CometChat.MediaMessage(
                receiverID,
                "",
                messageType,
                receiverType
            );
            
            mediaMessage.setAttachment(attachment);
            
            CometChatUIKit.sendMediaMessage(mediaMessage).then(
                (message) => {
                    console.log("Media message sent successfully:", message);
                },
                (error) => {
                    console.error("Error sending media message:", error);
                }
            );
        } catch (error) {
            console.error("Error in sendMediaMessageWithDeployedURL:", error);
        }
    };

Once you’ve implemented this, you’ll be able to seamlessly send media messages by passing a deployed file URL directly using the sendMediaMessage method.

Results: