# File preview

> [HTML Version](view_file_widget.html)

Using the **File Preview** widget, you can see the contents of the file in the app or task item page.

To place the widget, drag it to the canvas from the right panel of the [interface designer](interface_designer.md) or click **+Widget**. To learn more, see [Form templates](360029250931.md). Fill out the settings in the pop-up.

## Main tab

**(file_preview_wgt.PNG)**

- **File**. Select the **File** context variable that will store the file to be opened for preview. Click the **<Not defined>** link and select the appropriate variable.

Also, you can select a **File **type property from the [context](context_types.md#appcontext) of an **App **type variable. Let’s say there is a **Contract** field of the **App **type on the form. You can use the **File preview** widget to demonstrate the preview of a contract stored in this field. To do that, in the widget’s settings, in the **File** field find the **Contract** app and select its **File **type property.

## Events and System tab

These tabs are for system settings that are the same for all the widgets. They allow you to configure a widget’s visibility and access to its data, define what happens, when the user moves or hovers the pointer over the widget, etc. Find out more in [System widget settings](common_widget_settings.md). 

To complete the settings, click **Save**. To make the changes available to users, click **Save** and **Publish** in the top toolbar.