Dialog Box: Files

The Files dialog box gives a user the ability to attach files to the primary record displayed on a form. To open this dialog box, the user clicks the Files button on the right side of the form title bar. Below you can see an example of the Files button and the corresponding dialog box.

The Files dialog box is implemented using the qp-upload-dialog control.

Hiding the Files Button

The Files button is displayed by default. To hide this button from the form title bar, specify hideFilesIndicator : true in the graphInfo decorator.

Default Closing Behavior

By default, a user can close the Files dialog box only by clicking the X button in the dialog box. A user cannot close the dialog box by clicking outside the dialog box.

Opening the Files Dialog Box from a Custom Button

You can implement a button anywhere on a form, and specify that this button should open the Files dialog box. For this purpose, do the following:

In TypeScript code, define the following method, which opens the Files dialog box.

filesShow() {
  (this.activeScreenVM?.screenService
    .getDataComponent(NoteMenuDataComponent.dataComponentName) as NoteMenuDataComponent).filesShow();
}

In HTML, define a button by using the qp-button tag.

<qp-button id="btnFiles" caption="Attach Files"></qp-button>

In the qp-button tag, specify the method that opens the Files dialog box in the click.delegate attribute, as the following code shows.
```
<qp-button id="btnFiles" caption="Open Files" click.delegate="filesShow()">
</qp-button>
```