5. **Optional:** Configure attributes for the `sp-attachment-picker` directive.
* `disable-picker-overlay="true"`: Turns off showing an overlay over the attachment zone when you drag a file over it. By default, the overlay is enabled.
* `onFilePick`: Implements custom logic by triggering an event when any file is picked. Set the value to a function that takes in the references of all the selected files as an array as the first parameter. For example, `on-file-pick="attachFiles($files)"`. Examples of custom logic that could be implemented include previewing the files, custom validations, or custom upload logic. If this attribute is configured, the `attachment-handler="attachmentHandler"` attribute isn't needed and can be removed.
{#add-attachments-zone-to-page__ul_g11_xlw_cxb}
6. **Optional:** Hide the attachment zone on mobile devices.
1. Add the `ng-if="isDesktopBrowser"` directive to the `sp-attachment-picker` directive.
2. In the Client Script of the widget, add the following script.
$scope.isNative = cabrillo.isNative();
$scope.isMobileBrowser = spUtil.isMobile() && !$scope.isNative;
$scope.isDesktopBrowser = !$scope.isNative && !$scope.isMobileBrowser;
{#add-attachments-zone-to-page__substeps_wm1_kgf_sxb}
7. Select Save.
### Result
On a page with the widget, you can drag one or more selected files over the attachment zone and drop them to attach them to the record.
## Add an attachments section to a widget {#ariaid-title4}
Allow portal users to paste, drop, or navigate to files in a section of a widget to quickly attach files to a record.
### Before you begin
To configure an attachments section in a widget, you must clone or create a widget that supports adding attachments by calling `attachmentHandler` set to an instance of `nowAttachmentHandler` in
its client script. For an example of a widget like this, see the [Form widget](https://www.servicenow.com/docs/kcCiaZ0z1YYRnPWH8b~ywg "The form widget is a platform form within the Service Portal UI with a few differences. You can use this base system widget as-is in your portal or clone it to suit your own business needs."). For more information about cloning widgets, see [Clone a widget](https://www.servicenow.com/docs/zp2rp1ncHgD287W05TnDLw "Take advantage of existing code by cloning and editing an existing widget.").
Note:
Base system widgets are read-only so you can benefit from future updates. To make changes, you can clone base system widgets. However, cloned widgets are considered custom and don't benefit from future updates to the widgets they were cloned from.
Role required: sp_admin or admin
### About this task
By default, portal users can add attachments on many base system pages by selecting the Add attachments icon (![Attachment icon]()) to open the Add attachments dialog box. With an attachments section, portal users can add attachments with fewer clicks.
In this example, the attachments section is added to the bottom of a catalog item widget.Figure 2. Attachment section in a widget
### Procedure
1. Navigate to AllService PortalService Portal Configuration.
2. Select Widget Editor.
3. In the Edit an existing widget menu, select the widget you cloned to add the attachment section to.
4. In the HTML Template of the widget, add the `sp-attachment-picker` directive as an element where you want the attachments section to appear.
5. **Optional:** Configure attributes for the `sp-attachment-picker` directive.
* `disable-picker-overlay="true"`: Turns off showing an overlay over the attachment section when you drag a file over it. By default, the overlay is enabled.
* `onFilePick`: Implements custom logic by triggering an event when any file is picked. Set the value to a function that takes in the references of all the selected files as an array as the first parameter. For example, `on-file-pick="attachFiles($files)"`. Examples of custom logic that could be implemented include previewing the files, custom validations, or custom upload logic.
{#add-attachments-section-widget__ul_g11_xlw_cxb}
6. **Optional:** Hide the attachment section on mobile devices.
1. Add the `ng-if="isDesktopBrowser"` directive to the `sp-attachment-picker` directive.
2. In the Client Script of the widget, add the following script.
$scope.isNative = cabrillo.isNative();
$scope.isMobileBrowser = spUtil.isMobile() && !$scope.isNative;
$scope.isDesktopBrowser = !$scope.isNative && !$scope.isMobileBrowser;
{#add-attachments-section-widget__substeps_wm1_kgf_sxb}
7. Select Save.
### Result
On a page with the widget, you can paste or drop one or more selected files over the attachment section to attach them to the record.
Note:
Pasting attachments isn't supported on Firefox.
*[\>]: and then