Attachment

Do

Use the attachment pattern when the user is prompted by Joule to upload a document.

Don't

Don’t use the attachment pattern for user-initiated file upload. Due to technical reasons, only Joule can initiate the attachment flow.

Attachment Sheet

The attachment sheet is displayed over the Joule panel as a non-modal bottom sheet with the following component features.

A. Drag Handle

Used to collapse the bottom sheet.

B. App Bar

Displays the “Close” icon button and the header label. Tapping the “Close” icon button lets users dismiss the bottom sheet and cancel the attachment flow.

C. Attachment Form Cell

The attachment form cell lets users upload files by tapping the “Add” button.

D. Footer

The footer contains the “Submit” button, which allows users to send attached files. It is disabled by default and only becomes active once a file has been uploaded.

Anatomy of attachment sheet

Sent Attachment Bubble

A. Bubble

Sent attachments are displayed in a text message bubble within the conversation.

B. Attachment

Sent attachments are displayed as a list of object cells. Each attachment contains an icon thumbnail, file name, and download icon.

Tapping an attachment cell lets users view the file, whereas the download icon lets users download it.

Anatomy of sent attachments

The attachment form cell is used to enable users to upload files when prompted by Joule. By default, the attachment form cell is in an empty state. Users can upload an attachment by tapping the “Add” button. Once the user uploads a file, the attachment form cell displays the uploaded files in a scrollable list.

Uploading attachments

Users can submit attachments by tapping the “Submit” button. Submitted attachments appear in a container similar to user text messages. The container for submitted attachments is displayed as part of the conversation.

Submitting attachments

Upload Error

The attachment form cell is in error state if a file type is not supported, or a file size exceeds the upload limit.

Display an instructive global error message above the disabled "Submit” button to let user know that there is an error. Include a file-specific error message in the subtitle line of the attachment so that the user can identify the error file.

Users need to remove files with errors before they can submit attachments. The “Submit” button remains disabled until the errors are resolved.

Error handling for upload errors

Loading Error

If the attachment flow gets disrupted, or sent attachments fail to load after submitting, the illustrated message displays the error.

Error handling for loading error

The bottom sheet for the attachment flow adapts to the width of the Joule panel. On compact screens, the “Submit” button is set to fill the width of the attachment sheet and is center-aligned. In medium, expanded, and large window size classes, the “Submit” button is right-aligned, hugging the button label.

Attachment bottom sheet on compact (left) and expanded (right) screens

The bubble for sent attachments follows the same behavior as the user text message bubble. The width of the container is limited to the width of user text messages to ensure consistency and readability.

Sent attachments on compact (left) and expanded (right) screens