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, but you can use the files property on the MessageDraft object to pass a file/files of accepted types (FileList, File[], FileInput[]), like messageDraft.files = [myFileObject].

const handleFileChange = (e: React.ChangeEvent < HTMLInputElement > ) => {
   if (e.target.files && messageDraft) {
      messageDraft.files = [e.target.files[0]]
      setImage(e.target.files[0].name)
   }
}

Alternatively, you can 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"

show all 18 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	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"
})