Support attachments in your app built with XMTP

Use the remote attachment or attachment content type to support attachments in your app.

Use the remote attachment content type to send attachments of any size.
Use the attachment content type to send attachments smaller than 1MB.

Support remote attachments of any size

Remote attachments of any size can be sent using the RemoteAttachmentCodec and a storage provider.

Install the package

npm i @xmtp/content-type-remote-attachment

In some SDKs, the AttachmentCodec is already included in the SDK. If not, you can install the package using the following command:

Configure the content type

After importing the package, you can register the codec.

React Native

const client = await Client.create(signer, {
  env: "production",
  codecs: [new RemoteAttachmentCodec(), new StaticAttachmentCodec()],
});

Send a remote attachment

This method takes a DecryptedLocalAttachment object as an argument:

JavaScript

const { encryptedLocalFileUri, metadata } = await alice.encryptAttachment({
  fileUri: `file://{file}`,
  mimeType: "text/plain",
});

Upload an encrypted file to a remote server:

JavaScript

let url = await uploadFile(encryptedLocalFileUri);

Send a remote attachment message:

JavaScript

await convo.send({
  remoteAttachment: {
    ...metadata,
    scheme: "https://",
    url,
  },
});

Receive, decode, and decrypt a remote attachment

Now that you can receive a remote attachment, you need a way to receive a remote attachment. For example:

On the receiving end, you can use the decryptAttachment method to decrypt the downloaded file. This method takes an EncryptedLocalAttachment object as an argument and returns a DecryptedLocalAttachment object.

JavaScript

if (message.contentTypeId === "xmtp.org/remoteStaticAttachment:1.0") {
  // Now we can decrypt the downloaded file using the message metadata.
  const attached = await xmtp_client.decryptAttachment({
    encryptedLocalFileUri: downloadedFileUri,
    metadata: message.content() as RemoteAttachmentContent,
  })
 
  //attached.filename
  //attached.mimeType
  //attached.fileUri
}

Display the attachment:

JavaScript

<Image source={{ uri: attached.fileUri }} />

To handle unsupported content types, refer to the fallback section.

Support attachments smaller than 1MB

Attachments smaller than 1MB can be sent using the AttachmentCodec. The codec will automatically encrypt the attachment and upload it to the XMTP network.

Install the package

npm i @xmtp/content-type-remote-attachment

In some SDKs, the AttachmentCodec is already included in the SDK. If not, you can install the package using the following command:

Import and register

React Native

const client = await Client.create(signer, {
  env: "production",
  codecs: [new StaticAttachmentCodec()],
});

Load local file

// Read local file and extract its details
const file = fs.readFileSync("xmtp.png");
const filename = path.basename("xmtp.png");
const extname = path.extname("xmtp.png");
console.log(`Filename: ${filename}`);
console.log(`File Type: ${extname}`);

Send encrypted file

// Convert the file to a Uint8Array
const blob = new Blob([file], { type: extname });
let imgArray = new Uint8Array(await blob.arrayBuffer());
 
const attachment = {
  filename: filename,
  mimeType: extname, //image, video or audio
  data: imgArray,
};
 
console.log("Attachment created", attachment);
await conversation.send(attachment, { contentType: ContentTypeAttachment });

Receive encrypted file

if (message.contentType.sameAs(ContentTypeAttachment)) {
  const blobdecoded = new Blob([message.content.data], {
    type: message.content.mimeType,
  });
  const url = URL.createObjectURL(blobdecoded);
}