Send an Image | JuggleIM

Android
iOS
JavaScript
Flutter
ReactNative

API Definition

/**
 * send a media message (upload the media first, then send the message)
 * @param content media-message object
 * @param conversation conversation
 * @param callback send callback
 * @return message object
 */
Message sendMediaMessage(MediaMessageContent content,
                          Conversation conversation,
                          ISendMediaMessageCallback callback);

Code Example

ImageMessage image = new ImageMessage();
image.setHeight(600);
image.setWidth(800);
image.setLocalPath("xxxxxxxxxxxx");
Conversation conversation = new Conversation(Conversation.ConversationType.PRIVATE, "userid1");
IMessageManager.ISendMediaMessageCallback callback = new IMessageManager.ISendMediaMessageCallback() {
    @Override
    public void onProgress(int progress, Message message) {
        Log.i("TAG", "onProgress");
    }

    @Override
    public void onSuccess(Message message) {
        Log.i("TAG", "send message success");
    }

    @Override
    public void onError(Message message, int errorCode) {
        Log.i("TAG", "send message error");
    }

    @Override
    public void onCancel(Message message) {
        Log.i("TAG", "onCancel");
    }
};
Message message = JIM.getInstance().getMessageManager().sendMediaMessage(image, conversation, callback);
Log.i("TAG", "after send, clientMsgNo is " + message.getClientMsgNo());

API Definition

/// send a media message (upload the media first, then send the message)
/// - Parameters:
///   - content: media-message object
///   - conversation: conversation
///   - progressBlock: upload progress callback
///   - successBlock: success callback
///   - errorBlock: failure callback
///   - cancelBlock: callback triggered when the user cancels the upload
- (JMessage *)sendMediaMessage:(JMediaMessageContent *)content
                inConversation:(JConversation *)conversation
                      progress:(void (^)(int progress, JMessage *message))progressBlock
                       success:(void (^)(JMessage *message))successBlock
                         error:(void (^)(JErrorCode errorCode, JMessage *message))errorBlock
                        cancel:(void (^)(JMessage *message))cancelBlock;

Code Example

JConversation *conversation = [[JConversation alloc] initWithConversationType:JConversationTypePrivate conversationId:@"userid2"];
JImageMessage *image = [[JImageMessage alloc] initWithImage:uiImage];
JMessage *m = [JIM.shared.messageManager sendMediaMessage:image
                                            inConversation:conversation
                                                  progress:^(int progress, JMessage *message) {

} success:^(JMessage *message) {

} error:^(JErrorCode errorCode, JMessage *message) {

} cancel:^(JMessage *message) {

}];
NSLog(@"after send, m.clientMsgNo is %lld", m.clientMsgNo);

Developers only need to pass a File object; the image sending method automatically generates a thumbnail.

Parameters

Name	Type	Required	Default	Description	Version
message	Object	Yes		Message object	1.0.0
message.conversationType	Number	Yes		Conversation type	1.0.0
message.conversationId	String	Yes		Conversation ID. For `PRIVATE` conversations, it is the recipient userId; for `GROUP` conversations, it is the group ID.	1.0.0
message.content	Object	Yes			1.0.0
message.content.file	File	Yes		Image object	1.0.0
message.mentionInfo	Object	No	None	Applies when `conversationType` is `GROUP`. Setting `mentionInfo` marks this message as a mention message.	1.0.0
mentionInfo.mentionType	Number	No	None	Mention type. See Mention Message Enums for details.	1.0.0
mentionInfo.targetIds	Array	No	None	List of specified members. The SDK prioritizes `mentionType` when determining the mention type.	1.0.0
lifeTime	Number	No	0	Message destruction duration. It must be greater than `0`, in `ms`; for example, 60 seconds is `1 * 60 * 1000`.	1.9.0
lifeTimeAfterRead	Number	No	0	Read-once message duration. It must be greater than `0`, in `ms`; for example, 60 seconds is `1 * 60 * 1000`.	1.9.0

callbacks Parameters

Name	Type	Required	Description	Version
callbacks	Object	No	Callback object	1.0.0
callbacks.onbefore	Function	No	Pre-send callback. When invoked, it returns the temporary message identifier `tid`, which can be used to render the message. After a successful send, the backend updates the message state by `tid`.	1.0.0
callbacks.onprogress	Function	No	File upload progress callback	1.0.0
callbacks.onerror	Function	No	File upload failure callback. Returns error details and stops the message send.	1.0.0

Success Callback

Name	Type	Description	Version
message	Object	After sending succeeds, returns a message object with `messageId` and `sentTime`. See the message structure in Message	1.0.0

Failure Callback

Name	Type	Description	Version
result	Object	When sending fails, returns an object containing `tid` and `error`. Check `error.msg` directly or see [status codes].(../../../status_code/web)	1.0.0

Code Example

let { ConversationType } = JIM;

// get the file object from the <input type="file"> onchange event
let file = e.target.files[0];

let message = {
  conversationType: ConversationType.PRIVATE,
  conversationId: 'userid02',
  content: {
    file: file
  },
};

jim.sendImageMessage(message, {
  onbefore: (message) => {
    /*
      message.tid  The message can now be rendered on the page. Use message.tid as its unique identifier and update the progress bar by message.tid when onprogress fires
    */
  },
  onprogress: ({ percent, message }) => {
    console.log(`${percent}%`, message);
  },
  onerror: (error, message) => {
    console.log('upload file error', error);
  }
}).then((msg) => {
  console.log('send image message successfully', msg)
}, (result) => {
  let { error, tid } = result;
  // Use tid to update the failed-message state. On Web, failed messages are stored only in SDK memory and are unavailable after a refresh
  console.log(tid, error);
});

Because sending is asynchronous, calling sendImageMessage synchronously returns a message object, which can be displayed in the UI immediately.

Use message.clientMsgNo as the unique identifier. After callback is triggered, update message state, such as upload progress, by clientMsgNo.

The SDK has built-in file upload support. Assign a local file path to ImageMessage.localPath; the SDK uploads the file automatically and returns its URL.

Note: Before sending files, images, videos, or similar messages, configure OSS file storage in the Admin Console.

Code Example

import JuggleIM from 'juggleim-rnsdk';

const conversation = {
  type: 1,
  id: 'userId1'
};

const imageMessage = {
  conversation: conversation,
  content: {
    contentType: 'jg:image',
    localPath: '/path/to/image.jpg',
    width: 800,
    height: 600
  }
};

const callback = (message: any, errorCode: number, progress?: number) => {
  if (errorCode === 0) {
    console.log('sendImageMessage success, messageId is ' + message.messageId);
  } else if (errorCode === 100) {
    console.log('sendImageMessage onProgress, progress is ' + progress);
  } else {
    console.log('sendImageMessage error, errorCode is ' + errorCode.toString());
  }
};

JuggleIM.sendImageMessage(imageMessage, callback).then((message) => {
  console.log('after send, clientMsgNo is ' + message.clientMsgNo);
});

Because sending is asynchronous, calling sendMessage synchronously returns a message object, which can be displayed in the UI immediately.

Use message.clientMsgNo as the unique identifier. After callback is triggered, update message state, such as upload progress, by clientMsgNo.

The SDK has built-in file upload support. Assign a local file path to ImageMessage.localPath; the SDK uploads the file automatically and returns its URL.

Note: Before sending files, images, videos, or similar messages, configure OSS file storage in the Admin Console.

Code Example

Conversation conversation = Conversation(ConversationType.group, 'groupId1');
ImageMessage imageMessage = ImageMessage();
imageMessage.height = 600;
imageMessage.width = 800;
imageMessage.localPath = '/Applications/xxx/xxx/image.jpg';

DataCallback<Message> callback = (m, errorCode) {
  if (errorCode == 0) {
    print("sendMediaMessage success, messageId is " + m.messageId);
  } else {
    print('sendMediaMessage error, errorCode is ' + errorCode.toString() + ', clientMsgNo is ' + m.clientMsgNo!.toString());
  }
};

//progress ranges from 0 to 100
SendMessageProgressCallback progressCallback = (message, progress) {
  print('sendMediaMessage onProgress, progress is $progress');
};

Message mediaMessage = await JuggleIm.instance.sendMediaMessage(imageMessage, conversation, callback, progressCallback);