Increase in-app commenting with attachments

Using Attachments in Comments allows you to create an even more engaging in-app experience, meaning your users can easily communicate by sharing document attachments in comments.

on October 3rd, 2024

Increase in-app commenting with attachments

Product updates Comments

Ready to get started?

Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.

Get started for free

Increase in-app commenting with attachments

Using Attachments in Comments allows you to create an even more engaging in-app experience, meaning your users can easily communicate by sharing document attachments in comments.

on October 3rd, 2024

In today’s digital landscape, users expect more than just text-based communication. The ability to share files, images, and other media with colleagues is essential for a complete collaborative experience, and without it, users will fall back to email, Slack, or other file-sharing tools.

Overview

Out of the box attachments - Enabled in our React components by default.
Build attachments your way - Use primitives to create custom attachment UIs.
Attachments in the dashboard - Inspect users’ attachments on our website.

Out of the box attachments

Our React components in Comments and Text Editor now allow you to attach files to comments, and this is enabled by default. Users can upload files using the file picker, or by dragging/pasting files into the composer.

All files types are supported, and our Pro plan allows individual files up to 50MB in size. When clicking on attachments, each type of file uses its default browser behavior—usually opening media in a new tab, or downloading the file.

It’s possible to customize this behavior using the onAttachmentClick prop on Thread. For example below, we’re cancelling the default behaviour, and instead calling custom methods to download the file and display a toast notification.

<Thread  key={thread.id}  thread={thread}  onAttachmentClick={({ attachment, url }, e) => {    e.preventDefault();
    // Custom behavior on click    __downloadFile__(url);    __toast__(`${attachment.name} has been downloaded`);  }}/>

Attachments are optional and can also be disabled, make sure to read our upgrade guide to learn more.

Build attachments your way

Along with our default components, we’ve also made it possible to build attachments using new primitive components. For example, below we’re showing a completely custom Comments setup with attachments.

Our two new components, Composer.AttachFiles, which opens a file upload dialog and Composer.AttachmentsDropArea, which allows you to drop files into the composer, both help enable this,.

function MyComposer() {  const createThread = useCreateThread();
  return (    <Composer.Form      onComposerSubmit={({ body, attachments }) => {        const thread = createThread({          body,          attachments,          metadata: {},        });      }}    >      <Composer.Editor components={/* ... */} />      <Composer.AttachFiles>Attach Files</Composer.AttachFiles>      <Composer.AttachmentsDropArea />      <Composer.Submit>Submit</Composer.Submit>    </Composer.Form>  );}

To render each attached file in the composer, useComposer provides you with information to render. For example, here’s how to list each attachment in a composer.

function MyComposerAttachments() {  const { attachments, removeAttachment } = useComposer();
  return (    <>      {attachments.map((attachment) => (        <div key={attachment.id}>          {attachment.name} ({attachment.status})          <button onClick={() => removeAttachment(attachment.id)}>Remove</button>        </div>      )}    </>  );}

Learn more about handling attachments in our docs, or try our Next.js Comments Primitives example to test and modify a live demo.

Attachments in the dashboard

In addition to our packages, we’ve also added attachments to our dashboard, meaning you can inspect which files your users are uploading.

Get started with attachments

To use the latest features, update now by following our upgrade guide.

Contributors

Contributors include:

6 authors

Product updates Comments

Ready to get started?

Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.

Get started for free

Overview

Out of the box attachments - Enabled in our React components by default.
Build attachments your way - Use primitives to create custom attachment UIs.
Attachments in the dashboard - Inspect users’ attachments on our website.

Out of the box attachments

<Thread  key={thread.id}  thread={thread}  onAttachmentClick={({ attachment, url }, e) => {    e.preventDefault();
    // Custom behavior on click    __downloadFile__(url);    __toast__(`${attachment.name} has been downloaded`);  }}/>

Attachments are optional and can also be disabled, make sure to read our upgrade guide to learn more.

Build attachments your way

Our two new components, Composer.AttachFiles, which opens a file upload dialog and Composer.AttachmentsDropArea, which allows you to drop files into the composer, both help enable this,.

function MyComposer() {  const createThread = useCreateThread();
  return (    <Composer.Form      onComposerSubmit={({ body, attachments }) => {        const thread = createThread({          body,          attachments,          metadata: {},        });      }}    >      <Composer.Editor components={/* ... */} />      <Composer.AttachFiles>Attach Files</Composer.AttachFiles>      <Composer.AttachmentsDropArea />      <Composer.Submit>Submit</Composer.Submit>    </Composer.Form>  );}

To render each attached file in the composer, useComposer provides you with information to render. For example, here’s how to list each attachment in a composer.

function MyComposerAttachments() {  const { attachments, removeAttachment } = useComposer();
  return (    <>      {attachments.map((attachment) => (        <div key={attachment.id}>          {attachment.name} ({attachment.status})          <button onClick={() => removeAttachment(attachment.id)}>Remove</button>        </div>      )}    </>  );}

Learn more about handling attachments in our docs, or try our Next.js Comments Primitives example to test and modify a live demo.

Increase in-app commenting with attachments

Ready to get started?

Related blog posts

Understanding sync engines: How Figma, Linear, and Google Docs work

Configure each user’s notification settings for email, Slack, and more

A better way to email your users about unread content

Increase in-app commenting with attachments

Overview

Out of the box attachments

Build attachments your way

Attachments in the dashboard

Get started with attachments

Contributors

Ready to get started?

Related blog posts

Understanding sync engines: How Figma, Linear, and Google Docs work

Configure each user’s notification settings for email, Slack, and more

A better way to email your users about unread content

Overview

Out of the box attachments

Build attachments your way

Attachments in the dashboard

Get started with attachments

Contributors