SDKsWASM

Create an image message from a file

Create an image message from a browser File with the WASM SDK.

createImageMessageByFile() creates a message from a browser file and its image metadata. The source image, large image, and thumbnail can have different dimensions and resource information. The example reuses one object only because all three variants are identical in this case.

Parameters

Parameter	Type	Required	Description
`file`	`File`	Yes	Original image file from the browser.
`sourcePicture`	`PicBaseInfo`	Yes	Source image information.
`bigPicture`	`PicBaseInfo`	Yes	Large image information.
`snapshotPicture`	`PicBaseInfo`	Yes	Thumbnail information.
`sourcePath`	`string`	Yes	Local filename or application-defined path of the source file.

All three PicBaseInfo parameters use the same field structure:

Parameter	Type	Required	Description
`PicBaseInfo.uuid`	`string`	Yes	Unique identifier for the image resource.
`PicBaseInfo.type`	`string`	Yes	Image MIME type.
`PicBaseInfo.size`	`number`	Yes	Image size in bytes.
`PicBaseInfo.width`	`number`	Yes	Image width in pixels.
`PicBaseInfo.height`	`number`	Yes	Image height in pixels.
`PicBaseInfo.url`	`string`	Yes	Image URL. Pass an empty string when creating from a file; the SDK uploads the image during sending.

const picture = {
  uuid: crypto.randomUUID(),
  type: file.type,
  size: file.size,
  width,
  height,
  url: '',
};
const { data: message } = await openimsdk.createImageMessageByFile({
  file,
  sourcePicture: picture,
  bigPicture: picture,
  snapshotPicture: picture,
  sourcePath: file.name,
});

Derive the image dimensions and size from the actual file. When the Promise resolves, it has created only a pending message object. Use sendMessage() afterward to upload and send it.

Was this page helpful?