The File Preview UI element is a user interface component that enables users to preview the contents of files quickly and easily without fully opening them. It can save time and enhance productivity, providing a glimpse of what’s inside a file without having to launch it entirely.
File preview UI elements offer various benefits such as conveying information, improving the aesthetic appeal of an interface, providing visual cues and feedback or presenting complex data or concepts in a more accessible way.
A File Preview element can be configured for both mobile and web applications.
The settings for the File Preview element include the following properties:
Inline → Has accordion:
false
: Displays the preview inline without an expand/collapse option.true
(Default View: Collapsed): Displays the preview inline with an expand/collapse option, initially collapsed.true
(Default View: Expanded): Displays the preview inline with an expand/collapse option, initially expanded.Modal → view icon is enabled
PDF documents uploaded to the Media Library must adhere to a maximum file size limit of 10 MB.
It’s worth noting that the inline modal view can raise accessibility issues if the file preview’s height exceeds the screen height.
Both iOS and Android devices support the share button.
The File Preview styling property enables you to customize the appearance of the element by adding valid CSS properties, for more details, click here.
When drag and drop a File Preview element in UI Designer, it comes with the following default styling properties:
Below is an example of a File Preview UI element with the following properties: