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.

icon

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

PropertyTypeDescription
objectarrayList of key-value pairs for specific file parameters.
 → namestringName of the file, like error-1.jpg.
 → idstringUnique identifier assigned to the file by PubNub, like 736499374.
 → urlstringFile'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.

icon

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

ParameterTypeRequiredDefaultDescription
limitnumberNo100Number of files to return.
nextstringNon/aString token to get the next batch of files.

Output

ParameterTypeDescription
Promise<>objectReturned object containing these fields: files, next, and total.
 → filesobjectArray containing file details.
   → namestringName of the file, like error-1.jpg.
   → idstringUnique identifier assigned to the file by PubNub, like 736499374.
   → urlstringFile's direct downloadable URL, like https://ps.pndsn.com/v1/files/demo/channels/support/files/736499374/error-1.jpg.
 → nextstringRandom 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.
 → totalnumberTotal 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.

icon

Under the hood

Method signature

This method takes the following parameters:

channel.deleteFile({
id: string;
name: string;
}): Promise<{ status: number }>

Input

ParameterTypeRequiredDefaultDescription
idstringYesn/aUnique identifier assigned to the file by PubNub.
namestringYesn/aName of the file.

Output

TypeDescription
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"
})
Last updated on