File Component

The File component is used to include attachments on a form. A user can attach a file from their computer, or use a camera to take a picture and upload it.

This component does not actually submit file attachments to WebEOC; it inserts a text field on the form. When a user provides an attachment, it is uploaded to an AWS file bucket. In WebEOC, a text URL is provided for the user to copy and paste into a browser to view the attachment. Using the browser's tools, the user can then download, save, and print the attachment.

For example, if a user attaches a photo, the photo does not render in WebEOC. In WebEOC, the user sees a URL text string that they copy and paste into a browser to view the photo.

Attachments up to 40 MB are supported.
To use this field, you must have a corresponding text field in WebEOC. If you created the board in DesignStudio, and selected the Forms Compatible checkbox in the File Input component settings window, you do not need to create a text field in WebEOC as it is automatically created by DesignStudio. See File Input Component.
If you did not create the board in DesignStudio, you must create the field in the associated WebEOC board in the WebEOC Board Editor.

To add an attachment field if you did not create the board in DesignStudio

In DesignStudio Pro, complete the fields in the settings table.
In WebEOC, for the associated board, use the Board Editor to add a text field with the same name and extension as the Property Name.

Example: File Field Rendered on a Form

File Field Example

Settings

The settings for each component are grouped under tabs. While there are multiple tabs and many fields, some are applicable to advanced users (for example, the API and Conditional tabs and JSON fields) and you do not need to complete them to render the component. For this reason, the settings that are necessary are detailed for each component. In some cases, when an optional field is frequently used, it is listed in a second optional settings table. For tabs and fields that are not listed, advanced users are assumed to have pre-existing knowledge of how to work with them if they elect to apply them; however, they should be aware that the fields may not be compatible with WebEOC. Contact the Juvare Support Center at +1 (877) 771-0911 for additional information.

File Settings Window

The following settings are necessary to render the component:

File settings fields (required)
Field	Description	Procedure
Label (Display tab)	A unique identifier that appears as the label for the file field.	Unlimited alphanumeric characters, including special characters.
Property Name (API tab)	The name of the corresponding WebEOC field	[nameOfAttachment]_[identifier]. For example, if the attachment's name is MyPhoto, enter MyPhoto_formSubmission in this field. The extension can be anything; however, we recommend that you use something that identifies that it is a cloud attachment URL. If you did not create the board in DesignStudio, in WebEOC, add a text field with the same name in the associated board. If you created the board in DesignStudio, ensure that you selected Forms Compatible for the board's File Input component's setting window. See File Input Component.

Icons

The following tool icons are available:

Tool icons and descriptions
Name	What it Does	Procedure
Settings	Displays the settings window, in which you can modify the component’s settings.	To modify settings In the Design area, move the mouse pointer over the component. A toolbar appears on the top right. The icons that appear depend on the component. Click the Settings icon. Modify the fields as needed. See Add Form Components. Click Save.
Move	Moves the component to another position on the board. This option is useful with touch pages. If you are not using a touch page, you can drag the component to its new location.
Copy Paste	Copies the current component and its settings and pastes it after the current component.	To copy the component In Design mode, click the component on the canvas. A toolbar appears on the top right. Click the Copy icon. Click the Paste below icon. A copy of the component appears below the original component. Click the Settings icon and modify the settings for the new component. Click Save to save the new settings for the newly-copied component.
Remove	Removes the current component from the form.	To remove the component In Design mode, click the component on the canvas. A toolbar appears on the top right. Click the Remove icon.