SDKsReact Native

Upload a file

Upload a file independently and obtain its remote URL with OpenIM React Native SDK.

Use uploadFile() to upload a local file independently. You can use it for avatars, group avatars, profile attachments, or other business files.

const { url } = await OpenIMSDK.uploadFile({
  name: 'avatar.png',
  contentType: 'image/png',
  uuid: 'avatar-upload-20260827',
  cause: 'user-avatar',
  filepath,
});

Parameters

Parameter	Type	Required	Description
`name`	`string`	Yes	The file name used for the upload.
`contentType`	`string`	Yes	The MIME type of the file.
`uuid`	`string`	Yes	The business identifier for this upload.
`cause`	`string`	No	The business-defined reason for the upload.
`filepath`	`string`	Yes	A local file path that the app can read.

When the call completes, it returns the remote resource URL in url. You can use the URL to update an avatar, store a business attachment, or create and send a URL-based media message.

UploadOnProgress is triggered during the upload. Its callback parameter includes the uploaded amount in current and the total file size in size. UploadComplete is triggered when the upload completes. Its callback parameter's data includes fileSize, streamSize, and storageSize.

function handleUploadProgress({ current, size }) {
  // ...
}

function handleUploadComplete({ data }) {
  // ...
}

// Register listeners
OpenIMSDK.on(OpenIMEvent.UploadOnProgress, handleUploadProgress);
OpenIMSDK.on(OpenIMEvent.UploadComplete, handleUploadComplete);

// Remove listeners
OpenIMSDK.off(OpenIMEvent.UploadOnProgress, handleUploadProgress);
OpenIMSDK.off(OpenIMEvent.UploadComplete, handleUploadComplete);

Remove the listeners when the component is destroyed, the user signs out, or the account changes.

Was this page helpful?