Sending Image Messages

This SDK also supports sending image messages, encapsulating logic for image upload, message sending, and more. Follow the steps below for integration.

1. Configure the Image Upload Instance

After the SDK is instantiated, the chat room instance will have a uploader property (which is the instance for the image upload functionality). The integrator needs to provide an input element of type file, and after this element is loaded, call uploader.initImgUploader() to pass the input element to initialize the image upload instance. For example:

const $imgUploadInput = document.querySelector('#img-upload-input');
// 配置图片上传实例
chat.uploader.initImgUploader($imgUploadInput);

Once the image upload instance is configured, the integrator only needs to control the display style of the input element. When a viewer clicks to trigger this element and selects an image, the SDK will internally detect this action, initiate the image upload, and trigger corresponding events during the process.

2. Listen to Local Image Message Sending Events

(1) SELF_CHAT_IMG event
This is the "local image sending" event. When the image upload starts, this event is triggered, allowing the corresponding message to be inserted locally for display. Then, listen to the following events to show upload progress or results.

(2) CHAT_IMG_UPLOAD_PROGRESS event
The "image upload progress" event. It indicates states such as image upload starting, completion, or failure.
After the image upload is complete, the SDK internally sends the corresponding image message to the backend service, which will process it further.

When listening to the chat.events.CHAT_IMG_UPLOAD_PROGRESS event, if eventData.content.status matches $chat.uploader.UploadImgStatus.UPLOAD_FAIL, it indicates an error during the upload process. You can attempt to re-upload and send by using chat.uploader.resend(imgMsgId: String).

(3) SELF_CHAT_IMG_RESULT event
The "local image message sending result" event, indicating the result of the backend processing the image message. The result field in the event parameters indicates whether the image passed the violation check. Only when the Boolean value is false does it mean the check failed. In this case, you can display the corresponding sending result (e.g., modify the locally inserted message). Images that fail the check will not be broadcast to other users and cannot be retrieved from the history message API.

3. Programmatically Trigger the File Selection Dialog

chat.uploader.selectFile()