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 have File Sharing enabled for your app's keyset in the Admin Portal, with the selected storage region and 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

You can attach files to a draft message and publish it using the send() method.

Method signature

Under the hood

To add files, you must add elements to the files field ([InputFile]) of a MessageDraft object.

Basic usage

Attach two files of different formats to a text message.

const isTypingIndicatorTriggered = channel.type !== 'public';

// Create a message draft
const messageDraft = channel.createMessageDraftV2({ isTypingIndicatorTriggered });

if (messageDraft) {
  // Update the text content of the draft
  messageDraft.update("Here's some important documents:");

  // Specify files to upload
  const textFileStream = {
    name: "txtFileStream.txt",
    type: "text/plain",
    source: {
      stream: new File(["content"], "filename.txt", { type: "text/plain" }),

show all 44 lines

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	Description
object Type: array	List of key-value pairs for specific file parameters.
→ name Type: string	Name of the file, like error-1.jpg.
→ id Type: string	Unique identifier assigned to the file by PubNub, like 736499374.
→ url Type: string	File's direct downloadable URL, like https://ps.pndsn.com/v1/files/demo/channels/support/files/736499374/error-1.jpg.
→ type? 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

* required

Parameter	Description
limit Type: number Default: 100	Number of files to return.
next Type: string Default: n/a	String token to get the next batch of files.

Output

Parameter	Description
Promise<> Type: object	Returned object containing these fields: files, next, and total.
→ files Type: object	Array containing file details.
→ name Type: string	Name of the file, like error-1.jpg.
→ id Type: string	Unique identifier assigned to the file by PubNub, like 736499374.
→ url Type: string	File's direct downloadable URL, like https://ps.pndsn.com/v1/files/demo/channels/support/files/736499374/error-1.jpg.
→ next Type: 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 Type: 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

* required

Parameter	Description
id * Type: string Default: n/a	Unique identifier assigned to the file by PubNub.
name * Type: string Default: 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"
})