Send files
Attach files to text messages to share information (support chats) or improve collaboration (social conversations).
Contrary to the JavaScript SDK, Chat SDK lets users attach not one but multiple files to a single message. They can attach any format of the files, but the size of each file must be at most 5 MB.
Files are uploaded to a message sequentially - the more files you attach, the longer it will take for the files to upload. To improve user experience in your chat app, you can implement a progress bar indicating to the user how many files have already been uploaded.
Requires File Sharing
To store files with PubNub, you must enable File Sharing for your app's keyset in the Admin Portal, choose the storage region, and set the desired file retention period. Consider aligning the file retention period with the retention you set for Message Persistence to store messages and files for the same period of time.
Send files
There is no dedicated method for sending files. To send a file, you must use sendText() - the same method you use for sending text messages - and attach the required file information.
Encrypt/Decrypt messages and files
Chat SDK supports the PubNub's AES-CBC 256-bit crypto module used to automatically encrypt and decrypt messages and files. Learn how to configure your Chat SDK instance to enable the module in your app.
Under the hood
Method signature
Head over to the sendText() method section for details.
Basic usage
Attach two files of different formats to a text message.
// reading files from disk is platform-dependent
// in this case, we are accessing files selected with a file input in the web browser
const fileInput = document.querySelector("#file-input")
const filesFromInput = fileInput.files
// reference the channel where you want to send a text message
const channel = await chat.getChannel("support")
// invoke the "sendText()" method on the "channel" object
const message = await channel.sendText(
"These are the screenshots and logs. Hope that helps!",
{
files: filesFromInput,
}
)
The returned response has the following TextMessageContent structure:
{
"type": "text",
"text": "These are the screenshots and logs. Hope that helps!",
"files": [
{
"id": "736499374",
"name": "error-1.jpg",
"url": "https://ps.pndsn.com/v1/files/demo/channels/support/files/736499374/error-1.jpg",
"type": "image/jpeg"
},
{
"id": "981099398",
"name": "logs.html",
"url": "https://ps.pndsn.com/v1/files/demo/channels/support/files/981099398/logs.html",
"type": "text/html"
Get all message files
files is a getter method that lists all files attached to a single message.
Method signature
This method has the following signature:
message.files: {
name: string;
id: string;
url: string;
type?: string;
}[]
Properties
| Property | Type | Description |
|---|---|---|
object | array | List of key-value pairs for specific file parameters. |
→ name | string | Name of the file, like error-1.jpg. |
→ id | string | Unique identifier assigned to the file by PubNub, like 736499374. |
→ url | string | File's direct downloadable URL, like https://ps.pndsn.com/v1/files/demo/channels/support/files/736499374/error-1.jpg. |
→ type? | string | (MIME) type of the file, like image/jpeg. |
Basic usage
List all files attached to the last message on the support channel.
// reference the "support" channel with the message you want to check
const channel = await chat.getChannel("support")
// reference the last message on that "support" channel
const message = await channel.getHistory({count: 1}).messages[0]
// list all files added to the message
message.files
Get all channel files
getFiles() returns all files attached to messages on a given channel.
Under the hood
Method signature
This method takes the following parameters:
channel.getFiles({
limit?: number;
next?: string;
}): Promise<{
files: {
name: string;
id: string;
url: string;
}[];
next: string;
total: number;
}>
Input
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
limit | number | No | 100 | Number of files to return. |
next | string | No | n/a | String token to get the next batch of files. |
Output
| Parameter | Type | Description |
|---|---|---|
Promise<> | object | Returned object containing these fields: files, next, and total. |
→ files | object | Array containing file details. |
→ name | string | Name of the file, like error-1.jpg. |
→ id | string | Unique identifier assigned to the file by PubNub, like 736499374. |
→ url | string | File's direct downloadable URL, like https://ps.pndsn.com/v1/files/demo/channels/support/files/736499374/error-1.jpg. |
→ next | string | Random string returned from the server, indicating a specific position in a data set. Used for forward pagination, it fetches the next page, allowing you to continue from where you left off. |
→ total | number | Total number of files. |
Basic usage
List all files published on the support channel.
// reference the "support" channel
const channel = await chat.getChannel("support")
// list all files on that channel
await channel.getFiles()
Delete files
Delete sent files or files from published messages with the deleteFile() method.
Endpoint limitation
Due to a lack of search functionality in the PubNub Message Persistence API, once you delete the file, you cannot track which historical messages contained the deleted file to remove info about the file from those messages.
Under the hood
Method signature
This method takes the following parameters:
channel.deleteFile({
id: string;
name: string;
}): Promise<{ status: number }>
Input
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
id | string | Yes | n/a | Unique identifier assigned to the file by PubNub. |
name | string | Yes | n/a | Name of the file. |
Output
| Type | Description |
|---|---|
Promise<{ status: number }> | Status code of the response. |
Basic usage
Remove a file named error-screenshot.png from the support channel.
// reference the "support" channel
const channel = await chat.getChannel("support")
// remove the file
channel.deleteFile({
id: "18345892973",
name: "error-screenshot.png"
})