File Widget

Use this widget on the form to select and upload file attachments.

Last published at: July 27th, 2024

Description:

The file widget renders a file attachment control for selecting and uploading file attachments.

Inputs

  • ID/Name - Name of widget generated by FlowWright (read-only field)
  • Extensions - Enter file extensions as per the reference
    Allow Multiple Files - Select checkbox to upload multiple files (tick mark) 
  • Max File Size in MB - Enter max file size to restrict the uploaded attachment  
  • Hide - Select the checkbox to Hide (tick mark)
  • Read Only - Select the checkbox to Read-Only (tick mark)
  • Show Uploaded File -  Select the checkbox to display files uploaded (tick mark)
  • Tool Tip - Enter information to display on mouse hover on form render
  • Styles - Enter the CSS scripts for widget styles
  • Apply Classes - Select between custom classes defined 
  • Save - Save the input values 
  • Delete - Remove this form widget from the designer page 
  • Close - Close the input popup window
 

 

Design:

 

 

Example: 

Let’s build and execute the “FileWidgetDef” example.  

  • Create a new form definition called “FileWidgetDef.” 
  • Select the Open Designer checkbox and click the “Create” button
  • Drag a File widget to the canvas
  • Double-click on the widget to configure the “Settings” input. Provide a name to the control. Provide the file extensions (.doc,.docx,.pdf) to accept only files of these types for upload. Provide the max file size (single file or sum of all files)  to accept for upload. Select the checkbox “Required” if attachments are mandatory. Select the checkbox “Hide” not to show the control during run time. Select the checkbox “ReadOnly” to prevent file upload. The existing files (attached by a previous process instance) may be downloaded by selecting the “Allow download on Read-only” check box. Select the checkbox “Show uploaded file” to list files after the user uploads in run time. 
     

 

  • Click on the Save button to confirm the changes
  • Create a new form instance and edit the form. Upload the file attachments. The rendered widget will look as shown in the graphic below

 

  • Click the “Choose Files” button and upload a few files from your local folder. 

 

  • Upload a file attachment exceeding 1 MB in file size (the file may be single or multiple). The rendered widget will look as shown in the graphic below

 

  • Upload a file attachment with an extension different from the configured criteria. The rendered widget will look as shown in the graphic below