File viewer

API docs

When users click on a file, it opens in an overlay that fills the screen, making the file the focus item and bringing it up to full size. In this mode, users can perform actions on the file. They can also use navigational arrows to move between files on the page.

This applies to all document, image, audio and video files attached to the page. While variations between products exist, the rules below define the minimum level of consistency to ensure that the user knows what to expect when interacting with files in Atlassian products.

File viewer example
Description:
The file is identified by a file type icon and a file name. This is left aligned at the top.
Version (optional):
Only applicable for some products. On click, users can switch between versions.
Actions:
Actions vary by product.
Close:
Closes the view mode.
Show all files (optional):
Shows a thumbnail gallery of all files on the page.
Zoom options / comments (comments are optional):
These options appear on hover and depend on the file type and the product.
Timestamp:
This shows the name of the uploader and the date / time uploaded.
Navigation (optional):
The navigation takes users to the previous or next image. The images can be scrolled through in their order on the page - left to right and top to bottom.