An attachment control allows users to upload files such as image, audio, video, and text files as well as PDF, CSV, and presentation files. Tapping on the Add Attachment button (+) allows users to upload files from the photo library or other supported apps.
Attachment grid on iPhone (left) and on iPad (right)
Don’t use an attachment control for uploading profile images.
Don’t use an attachment control on read-only pages.
A. Attachment Label
Indicates at a glance the number of attachments that have been added to the attachment container.
B. Add Attachment Button
Lets the user add images, video, audio, and documents to the attachment collection.
C. Attachment Item
Provides a preview of the image, video, or document. If a preview is not available, then a doctype icon with the document name should be displayed. When tapped, the item goes into modal view where the user can view an image and allows for more functionality.
Compact attachment form cell anatomy
The Add Attachment button (+) is the main control that allows a user to add attachments. It remains in place as the user adds more attachments. Subsequent attachments will display to the right of the add attachment button (+) and if the number of attachments exceeds its limit, the attachment container will overflow to an additional row.
To add attachments, a user taps on the Add Attachment button (+). This initiates an action sheet that gives the users two choices – Insert Photo or Video, Add Attachments and Cancel.
Tapping on Add Attachments triggers a modal view for iCloud where a user can drill down into a folder to select a document.
Once the attachment is selected, the modal view moves down and the create screen shows the attached document.
To preview attachments, a user taps on an attachment item that navigates to a modal view with further details about the attachment.
From the modal view, a user can swipe to navigate to the next attachment or they can tap on the Back button to navigate back to the Create screen.
A user can reference which attachment they are viewing by looking at the title and subtitle in the navigation bar. The title reflects the current attachment out of the total number of attachments while the subtitle indicates the file name of the current attachment.
To delete attachments, a user can tap on the attachment item, navigating to the modal view.
From the modal view, they can delete the current attachment shown on screen by tapping on the Trash icon.
After the attachment is deleted, the changes are reflected on the attachment container and the attachment label.
Regular Readable Attachment View
The regular readable attachment view displays up to 6 attachments horizontally and 7 attachments on a consecutive row. Use full-screen attachment view on a full-screen modal view.
Regular readable attachment view
Compact Attachment View
The compact attachment view displays up to 5 attachments horizontally and 6 attachments on a consecutive row. Use the form sheet attachment view on a form sheet modal.
Compact attachment view
The minimum spacing between the two attachment items is 5 pt. The number of attachment items changes based on the attachment collection width.
n= number of attachment items in one collection row, n>=4, n is an integer
w = attachment collection width
n = (w+5)/87