Send files

Attach files to messages to share information or improve collaboration.

Chat SDK supports multiple file attachments per message (unlike the JavaScript SDK). Each file must be 5 MB or less. Files upload sequentially, so consider implementing a progress indicator for better UX.

Requires File Sharing

Enable File Sharing in the Admin Portal and configure storage region and retention. Align file retention with Message Persistence retention.

Send files

Attach files to a draft message and publish using send().

Method signature

The sendText() method calls PubNub Files API and the JavaScript SDK sendFile() method but extends its logic to let users send multiple files instead of just one. To do that, the file reaches the PubNub server after calling sendFile() - file data doesn't get stored in Message Persistence (storeInHistory param is set intentionally to false), and PubNub only returns the ID and name of the file in response. Having those details, Chat SDK calls another JavaScript method getFileUrl() to construct URL based on the received info from the server. Finally, all collected data - file name, ID, URL, and (MIME) type of the file - get attached to the message as metadata (TextMessageContent).

Under the hood

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

Sample code

Attach two files of different formats to a text message.

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

3// Create a message draft
4const messageDraft = channel.createMessageDraft({ isTypingIndicatorTriggered });
5

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

10  // Specify files to upload
11  const textFileStream = {
12    name: "txtFileStream.txt",
13    type: "text/plain",
14    source: {
15      stream: new File(["content"], "filename.txt", { type: "text/plain" }),
16      contentType: "text/plain",
17      contentLength: 14578
18    }
19  };
20

21  const pdfFileStream = {
22    name: "pdfFileStream.pdf",
23    type: "application/pdf",
24    source: {
25      stream: new File(["content"], "document.pdf", { type: "application/pdf" }),
26      contentType: "application/pdf",
27      contentLength: 12578
28    }
29  };
30

31  // Attach files to the draft message
32  messageDraft.files = [textFileStream, pdfFileStream];
33

34  // Send the draft message
35  messageDraft.send().then(timetoken => {
36    console.log(`Message sent successfully with timetoken: ${timetoken}`);
37  }).catch(error => {
38    console.error(`Failed to send message:`, error);
39  });
40}

show all 40 lines

Get all message files

files returns all files attached to a message.

Method signature

This method has the following signature:

1message.files: {
2    name: string;
3    id: string;
4    url: string;
5    type?: string;
6}[]

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.

Sample code

List all files attached to the last message on the support channel.

1// reference the "support" channel with the message you want to check
2const channel = await chat.getChannel("support")
3

4// reference the last message on that "support" channel
5const { messages } = await channel.getHistory({count: 1})
6const message = messages[0]
7

8// list all files added to the message
9message.files

Get all channel files

getFiles() returns all files attached to messages on a channel.

getFiles() calls Files API through listFiles() and getFileUrl() methods. Thanks to combining these two methods in one, getFiles() returns more file details - not only file names and IDs (like listFiles()) but also file URLs (getFileUrl()).

Under the hood

Method signature

This method takes the following parameters:

1channel.getFiles({
2    limit?: number;
3    next?: string;
4}): Promise<{
5    files: {
6        name: string;
7        id: string;
8        url: string;
9    }[];
10    next: string;
11    total: number;
12}>

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.

Sample code

List all files published on the support channel.

1// reference the "support" channel
2const channel = await chat.getChannel("support")
3// list all files on that channel
4await channel.getFiles()

Delete files

deleteFile() removes files from PubNub storage.

Endpoint limitation

After deleting a file, you cannot identify which historical messages contained it.

deleteFile() calls PubNub Files API and the JavaScript SDK deleteFile() method.

Under the hood

Method signature

This method takes the following parameters:

1channel.deleteFile({
2    id: string;
3    name: string;
4}): 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.

Sample code

Remove a file named error-screenshot.png from the support channel.

1// reference the "support" channel
2const channel = await chat.getChannel("support")
3// remove the file
4channel.deleteFile({
5    id: "18345892973",
6    name: "error-screenshot.png"
7})