Skip to main content

File Message

You can send file messages through the built-in file plugin in IMKit. These messages will appear in the message list component of the chat UI. By default, the file plugin sends messages containing the file message content object RCFileMessage (type identifier: RC:FileMsg).

message-file-unread(width=250) (width=250)

Limitations​

  • Only supports sending local files.
  • Files in file messages are uploaded to RC servers by default. To upload to your own server, you need to intercept the message and handle the upload manually. For details, see Intercept Messages.
  • File preview is not supported in IMKit. Use other apps to open files from the UI.

Usage​

The built-in File plugin in IMKit implements the file message feature in the extension panel. However, for backward compatibility, this feature is disabled by default in the SDK.

To enable file sending, add the following code in the viewDidLoad method of the chat UI.

Sample Code​

[self.chatSessionInputBarControl.pluginBoardView insertItem:RCResourceImage(@"plugin_item_file")   highlightedImage:RCResourceImage(@"plugin_item_file_highlighted")
title:RCLocalizedString(@"File")
atIndex:3
tag:PLUGIN_BOARD_ITEM_FILE_TAG];

Sending File Messages​

After enabling the file message feature, the file sending option will appear in the extension panel. Users can click the + button on the right side of the input bar to expand the panel and select the file icon to send a file message.

extension(width=250)

Customization​

Replace Default File Icons​

When displaying file messages (RCFileMessage) in the chat UI, the SDK shows icons matching the file type. Default icons are provided for the following file types. For other types, a generic default icon is displayed.

  • Images: bmp, cod, gif, ief, jpe, jpeg, jpg, jfif, svg, tif, tiff, ras, ico, pbm, pgm, png, pnm, ppm, xbm, xpm, xwd, rgb
  • Text: txt, log, html, stm, uls, bas, c, h, rtx, sct, tsv, htt, htc, etx, vcf
  • Video: rmvb, avi, mp4, mp2, mpa, mpe, mpeg, mpg, mpv2, mov, qt, lsf, lsx, asf, asr, asx, avi, movie, wmv
  • Audio: mp3, au, snd, mid, rmi, aif, aifc, aiff, m3u, ra, ram, wav, wma
  • Word: doc, dot, docx
  • Excel: xla, xlc, xlm, xls, xlt, xlw, xlsx

Starting from SDK version 5.3.4, apps can modify the icons displayed for specific file extensions. You can update individual icons, replace all icons, or add new file extensions and their corresponding icons. Note that the generic default icon cannot be replaced.

Parameters​

ParameterTypeDescription
typesNSDictionaryConfiguration for file message icons. The key is the file extension without . (e.g., png, pdf). The value is the local file path. If the path is empty or the file doesn’t exist, the default icon from RongCloud.bundle is used. The image size should match the default icons in RongCloud.bundle.

Sample Code​

[RCKitConfigCenter.ui registerFileSuffixTypes:types];

Customize File Message UI​

File messages are displayed in the message list using RCFileMessageCell. To adjust the built-in message style, we recommend customizing the message cell and providing it to the SDK. All message templates in IMKit inherit from RCMessageCell, so your custom cell should also inherit from RCMessageCell. For details, see Modify Message Display Styles.

Alternatively, you can directly replace the style resources, string resources, and icon resources referenced in the file message display template in RongCloud.bundle. Refer to the resources used in the IMKit source code RCFileMessageCell.m.

Customize File Sending Page UI​

  • Color of the top-right button when no file is selected: Modify via the relevant fields in the fileSelect dictionary in color.plist.

  • Top-left and top-right buttons: Change by setting the SDK's global navigation button color.

    RCKitConfigCenter.ui.globalNavigationBarTintColor = [UIColor whiteColor];

  • Color of the top-right button when a file is selected: Change by setting the SDK's global navigation button color.

    RCKitConfigCenter.ui.globalNavigationBarTintColor = [UIColor whiteColor];

Hide File Message Entry​

To dynamically modify this, remove the specific extension item via RCConversationViewController's chatSessionInputBarControl.pluginBoardView before displaying the chat UI.

For details, see Input Area.

Last updated on