Attachment Content Type

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

Open for feedback

You are welcome to provide feedback on this implementation by commenting on the Attachment Content Type XIP (XMTP Improvement Proposal).

Attachments with React

To learn how to use the attachment content type with the React SDK, see Handle content types with the React SDK.

Install the package

JavaScript

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

Import and register

JavaScript

import {
  ContentTypeAttachment,
  AttachmentCodec,
} from "@xmtp/content-type-remote-attachment";
// Create the XMTP client
const xmtp = await Client.create(signer, { env: "dev" });
// Register the codecs, AttachmentCodec is for handling local attachments under 1MB
xmtp.registerCodec(new AttachmentCodec());

Load local file

JavaScript

// 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

JavaScript

// 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

JavaScript

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