feat: add documentation for filepicker element (#4520)

* feat: add documentation for filepicker element

* fix: fix form-js library icon images

* style(formatting): minor grammatical tweaks

* fix: fix form-js library icon images on versioned docs

---------

Co-authored-by: christinaausley <84338309+christinaausley@users.noreply.github.com>
Co-authored-by: Mark Sellings <mark.sellings@camunda.com>

docs/components/modeler/forms/form-element-library/forms-element-library-button.md

@@ -6,7 +6,7 @@ description: A form element to trigger form actions
 
 A button allowing the user to trigger form actions.
 
-![Form Button Symbol](/img/form-icons/form-button.svg)
+<img src="/img/form-icons/form-button.svg" alt="Form Button Symbol" />
 
 ### Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-checkbox-group.md

@@ -6,7 +6,7 @@ description: A form element to select multiple values from set options
 
 A set of checkbox options providing data multi-selection for small datasets.
 
-![Form Checklist Symbol](/img/form-icons/form-checklist.svg)
+<img src="/img/form-icons/form-checkbox.svg" alt="Form Checkbox Symbol" />
 
 ### Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-checkbox.md

@@ -6,7 +6,7 @@ description: A form element to read and edit boolean data
 
 A checkbox allowing the user to read and edit boolean data.
 
-![Form Checkbox Symbol](/img/form-icons/form-checkbox.svg)
+<img src="/img/form-icons/form-checkbox.svg" alt="Form Checkbox Symbol" />
 
 ### Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-datetime.md

@@ -6,7 +6,7 @@ description: Learn about the datetime form element to read and edit date and tim
 
 A component allowing the user to read and edit date and time data.
 
-![Form Datetime Symbol](/img/form-icons/form-datetime.svg)
+<img src="/img/form-icons/form-datetime.svg" alt="Form Datetime Symbol" />
 
 ## Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-dynamiclist.md

@@ -6,7 +6,7 @@ description: Learn about the dynamic list form element to dynamically manage a l
 
 The **dynamic list** element is designed to dynamically manage a list of form elements. It enables users to add or remove items from the list and is particularly useful in scenarios where the number of items in a list is not fixed.
 
-![Dynamic List Symbol](/img/form-icons/form-dynamiclist.svg)
+<img src="/img/form-icons/form-dynamiclist.svg" alt="Dynamic List Symbol" />
 
 ## Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-expression.md

@@ -6,7 +6,7 @@ description: A form element to compute form state
 
 An expression field allowing the user to compute new data based on form state.
 
-![Form Expression Field Symbol](/img/form-icons/form-expression.svg)
+<img src="/img/form-icons/form-expression.svg" alt="Form Expression Field Symbol" />
 
 ### Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-filepicker.md

@@ -0,0 +1,22 @@
+---
+id: forms-element-library-filepicker
+title: Filepicker
+description: A form element to select files
+---
+
+A form element to select files.
+
+<img src="/img/form-icons/form-filepicker.svg" alt="Form Filepicker Symbol" />
+
+### Configurable properties
+
+- **Field label**: Label displayed on top of the file picker. Can either be an [expression](../../feel/language-guide/feel-expressions-introduction.md), plain text, or [templating syntax](../configuration/forms-config-templating-syntax.md).
+- **Supported file formats**: [Comma-separated list of supported file formats.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) Can either be an [expression](../../feel/language-guide/feel-expressions-introduction.md) or plain text.
+- **Upload multiple files**: Allows the user to upload multiple files at once. Can be dynamically set using an [expression](../../feel/language-guide/feel-expressions-introduction.md).
+- **Key**: Binds the field to a form variable, refer to the [data binding documentation](../configuration/forms-config-data-binding.md).
+- **Read only**: Makes the file picker read-only, meaning the user can't change but only read its state. Can be dynamically set using an [expression](../../feel/language-guide/feel-expressions-introduction.md).
+- **Disabled**: Disables the file picker, for use during development.
+- **Hide if**: [Expression](../../feel/language-guide/feel-expressions-introduction.md) to hide the file picker.
+- **Columns**: Space the field will use inside its row. **Auto** means it will automatically adjust to available space in the row. Read more about the underlying grid layout in the [Carbon Grid documentation](https://carbondesignsystem.com/guidelines/2x-grid/overview).
+- **Validation**: Given that one of the following properties is set, the form will only submit when the respective condition is fulfilled. Otherwise, a validation error will be displayed.
+  - **Required**: File picker must have a selected file.

docs/components/modeler/forms/form-element-library/forms-element-library-group.md

@@ -6,7 +6,7 @@ description: Learn about the group form element to group multiple form elements
 
 The group element serves as a container to group various form elements together. It allows for nesting of fields and assists in organizing complex forms.
 
-![Form Group Symbol](/img/form-icons/form-group.svg)
+<img src="/img/form-icons/form-group.svg" alt="Form Group Symbol" />
 
 ### Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-html.md

@@ -6,7 +6,7 @@ description: A form element to display HTML content.
 
 A flexible display component designed to quickly render HTML content for the user.
 
-![Form HTML Symbol](/img/form-icons/form-html.svg)
+<img src="/img/form-icons/form-html.svg" alt="Form HTML Symbol" />
 
 ## Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-iframe.md

@@ -12,7 +12,7 @@ Every iframe component is a sandbox. This means that the content of the iframe i
 
 :::
 
-![Form iframe Symbol](/img/form-icons/form-iframe.svg)
+<img src="/img/form-icons/form-iframe.svg" alt="Form iframe Symbol" />
 
 ## Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-image.md

@@ -6,7 +6,7 @@ description: Learn about the image view form element to display an image.
 
 An element allowing the user to display images.
 
-![Form Image Symbol](/img/form-icons/form-image.svg)
+<img src="/img/form-icons/form-image.svg" alt="Form Image Symbol" />
 
 ## Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-number.md

@@ -6,7 +6,7 @@ description: A form element to read and edit numeric data
 
 A number field allowing the user to read and edit numeric data.
 
-![Form Number Symbol](/img/form-icons/form-number.svg)
+<img src="/img/form-icons/form-number.svg" alt="Form Number Symbol" />
 
 ### Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-radio.md

@@ -6,7 +6,7 @@ description: A form element to select a value from set options
 
 A radio group allowing the user to select one of multiple data options for small datasets.
 
-![Form Radio Symbol](/img/form-icons/form-radio.svg)
+<img src="/img/form-icons/form-radio.svg" alt="Form Radio Symbol" />
 
 ### Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-select.md

@@ -6,7 +6,7 @@ description: A form element to select a value from set options
 
 A Select dropdown allowing the user to select one of multiple data option from larger datasets.
 
-![Form Select Symbol](/img/form-icons/form-select.svg)
+<img src="/img/form-icons/form-select.svg" alt="Form Select Symbol" />
 
 ### Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-separator.md

@@ -6,7 +6,7 @@ description: Learn about this layout element to add a visual separation between
 
 A **separator** element is used to create a visual separation between two elements.
 
-![Form Spacer Symbol](/img/form-icons/form-separator.svg)
+<img src="/img/form-icons/form-separator.svg" alt="Form Separator Symbol" />
 
 ## Usage
 

docs/components/modeler/forms/form-element-library/forms-element-library-spacer.md

@@ -6,7 +6,7 @@ description: Learn about this layout element to add vertical space between eleme
 
 A **spacer** element is used to create a defined amount of vertical space between two elements.
 
-![Form Spacer Symbol](/img/form-icons/form-spacer.svg)
+<img src="/img/form-icons/form-spacer.svg" alt="Form Spacer Symbol" />
 
 ## Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-table.md

@@ -6,7 +6,7 @@ description: Learn about the table form element to render tabular data.
 
 This is an element allowing the user to render tabular data.
 
-![Form table Symbol](/img/form-icons/form-table.svg)
+<img src="/img/form-icons/form-table.svg" alt="Form Table Symbol" />
 
 ## Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-taglist.md

@@ -6,7 +6,7 @@ description: A form element to select multiple values from set options
 
 A complex and searchable tag based component providing multi-selection for large datasets.
 
-![Form Taglist Symbol](/img/form-icons/form-taglist.svg)
+<img src="/img/form-icons/form-taglist.svg" alt="Form Taglist Symbol" />
 
 ### Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-text.md

@@ -6,7 +6,7 @@ description: A form element to display simple Markdown-powered text.
 
 A Markdown-powered text component allowing to display simple information to the user.
 
-![Form Text Symbol](/img/form-icons/form-text.svg)
+<img src="/img/form-icons/form-text.svg" alt="Form Text Symbol" />
 
 ## Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-textarea.md

@@ -6,7 +6,7 @@ description: Learn about the text area form element to read and edit multiline t
 
 A text area allowing the user to read and edit multiline textual data.
 
-![Form Textarea Symbol](/img/form-icons/form-textArea.svg)
+<img src="/img/form-icons/form-textArea.svg" alt="Form Textarea Symbol" />
 
 ## Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library-textfield.md

@@ -6,7 +6,7 @@ description: A form element to read and edit textual data
 
 A text field allowing the user to read and edit textual data.
 
-![Form Text Field Symbol](/img/form-icons/form-textField.svg)
+<img src="/img/form-icons/form-textField.svg" alt="Form Text Field Symbol" />
 
 ### Configurable properties
 

docs/components/modeler/forms/form-element-library/forms-element-library.md

@@ -115,6 +115,12 @@ The following form elements are currently available within Camunda Forms:
     <td>Compute intermediary data</td>
   </tr>
 
+  <tr>
+    <td><img src="/img/form-icons/form-filepicker.svg" alt="Filepicker Symbol" height="60"></img></td>
+    <td><a href="../forms-element-library-filepicker">Filepicker</a></td>
+    <td>Select files</td>
+  </tr>
+
   <tr>
     <td><img src="/img/form-icons/form-image.svg" alt="Image Symbol" height="60"></img></td>
     <td><a href="../forms-element-library-image">Image view</a></td>

docs/components/modeler/forms/sidebar-schema.js

@@ -24,6 +24,7 @@ module.exports = {
         lib_dir + "forms-element-library-iframe",
         lib_dir + "forms-element-library-table",
         lib_dir + "forms-element-library-expression",
+        lib_dir + "forms-element-library-filepicker",
         lib_dir + "forms-element-library-image",
         lib_dir + "forms-element-library-spacer",
         lib_dir + "forms-element-library-separator",

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-button.md

@@ -6,7 +6,7 @@ description: A form element to trigger form actions
 
 A button allowing the user to trigger form actions.
 
-![Form Button Symbol](/img/form-icons/form-button.svg)
+<img src="/img/form-icons/form-button.svg" alt="Form Button Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-checkbox.md

@@ -6,7 +6,7 @@ description: A form element to read and edit boolean data
 
 A checkbox allowing the user to read and edit boolean data.
 
-![Form Checkbox Symbol](/img/form-icons/form-checkbox.svg)
+<img src="/img/form-icons/form-checkbox.svg" alt="Form Checkbox Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-checklist.md

@@ -6,7 +6,7 @@ description: A form element to select multiple values from set options
 
 A set of checkboxes providing data multi-selection for small datasets.
 
-![Form Checklist Symbol](/img/form-icons/form-checklist.svg)
+<img src="/img/form-icons/form-checkbox.svg" alt="Form Checkbox Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-datetime.md

@@ -6,7 +6,7 @@ description: Learn about the datetime form element to read and edit date and tim
 
 A component allowing the user to read and edit date and time data.
 
-![Form Datetime Symbol](/img/form-icons/form-datetime.svg)
+<img src="/img/form-icons/form-datetime.svg" alt="Form Datetime Symbol" />
 
 ## Configurable properties
 

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-image.md

@@ -6,7 +6,7 @@ description: Learn about the image view form element to display an image.
 
 An element allowing the user to display images.
 
-![Form Image Symbol](/img/form-icons/form-image.svg)
+<img src="/img/form-icons/form-image.svg" alt="Form Image Symbol" />
 
 ## Configurable properties
 

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-number.md

@@ -6,7 +6,7 @@ description: A form element to read and edit numeric data
 
 A number field allowing the user to read and edit numeric data.
 
-![Form Number Symbol](/img/form-icons/form-number.svg)
+<img src="/img/form-icons/form-number.svg" alt="Form Number Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-radio.md

@@ -6,7 +6,7 @@ description: A form element to select a value from set options
 
 A radio button allowing the user to select one of multiple data option for small datasets.
 
-![Form Radio Symbol](/img/form-icons/form-radio.svg)
+<img src="/img/form-icons/form-radio.svg" alt="Form Radio Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-select.md

@@ -6,7 +6,7 @@ description: A form element to select a value from set options
 
 A Select dropdown allowing the user to select one of multiple data option from larger datasets.
 
-![Form Select Symbol](/img/form-icons/form-select.svg)
+<img src="/img/form-icons/form-select.svg" alt="Form Select Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-taglist.md

@@ -6,7 +6,7 @@ description: A form element to select multiple values from set options
 
 A complex and searchable tag based component providing multi-selection for large datasets.
 
-![Form Taglist Symbol](/img/form-icons/form-taglist.svg)
+<img src="/img/form-icons/form-taglist.svg" alt="Form Taglist Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-text.md

@@ -6,7 +6,7 @@ description: A form element to display static information.
 
 A text component allowing to display static information to the user.
 
-![Form Text Symbol](/img/form-icons/form-text.svg)
+<img src="/img/form-icons/form-text.svg" alt="Form Text Symbol" />
 
 ## Configurable properties
 

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-textarea.md

@@ -6,7 +6,7 @@ description: Learn about the text area form element to read and edit multiline t
 
 A text area allowing the user to read and edit multiline textual data.
 
-![Form Textarea Symbol](/img/form-icons/form-textArea.svg)
+<img src="/img/form-icons/form-textArea.svg" alt="Form Textarea Symbol" />
 
 ## Configurable properties
 

versioned_docs/version-8.2/components/modeler/forms/form-element-library/forms-element-library-textfield.md

@@ -6,7 +6,7 @@ description: A form element to read and edit textual data
 
 A text field allowing the user to read and edit textual data.
 
-![Form Text Field Symbol](/img/form-icons/form-textField.svg)
+<img src="/img/form-icons/form-textField.svg" alt="Form Text Field Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.3/components/modeler/forms/form-element-library/forms-element-library-button.md

@@ -6,7 +6,7 @@ description: A form element to trigger form actions
 
 A button allowing the user to trigger form actions.
 
-![Form Button Symbol](/img/form-icons/form-button.svg)
+<img src="/img/form-icons/form-button.svg" alt="Form Button Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.3/components/modeler/forms/form-element-library/forms-element-library-checkbox.md

@@ -6,7 +6,7 @@ description: A form element to read and edit boolean data
 
 A checkbox allowing the user to read and edit boolean data.
 
-![Form Checkbox Symbol](/img/form-icons/form-checkbox.svg)
+<img src="/img/form-icons/form-checkbox.svg" alt="Form Checkbox Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.3/components/modeler/forms/form-element-library/forms-element-library-checklist.md

@@ -6,7 +6,7 @@ description: A form element to select multiple values from set options
 
 A set of checkboxes providing data multi-selection for small datasets.
 
-![Form Checklist Symbol](/img/form-icons/form-checklist.svg)
+<img src="/img/form-icons/form-checkbox.svg" alt="Form Checkbox Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.3/components/modeler/forms/form-element-library/forms-element-library-datetime.md

@@ -6,7 +6,7 @@ description: Learn about the datetime form element to read and edit date and tim
 
 A component allowing the user to read and edit date and time data.
 
-![Form Datetime Symbol](/img/form-icons/form-datetime.svg)
+<img src="/img/form-icons/form-datetime.svg" alt="Form Datetime Symbol" />
 
 ## Configurable properties
 

versioned_docs/version-8.3/components/modeler/forms/form-element-library/forms-element-library-group.md

@@ -6,7 +6,7 @@ description: Learn about the group form element to group multiple form elements
 
 The group element serves as a container to group various form elements together. It allows for nesting of fields and assists in organizing complex forms.
 
-![Form Group Symbol](/img/form-icons/form-group.svg)
+<img src="/img/form-icons/form-group.svg" alt="Form Group Symbol" />
 
 ### Configurable properties
 

versioned_docs/version-8.3/components/modeler/forms/form-element-library/forms-element-library-image.md

@@ -6,7 +6,7 @@ description: Learn about the image view form element to display an image.
 
 An element allowing the user to display images.
 
-![Form Image Symbol](/img/form-icons/form-image.svg)
+<img src="/img/form-icons/form-image.svg" alt="Form Image Symbol" />
 
 ## Configurable properties