[External] Attachments: Limit the open file dialogue to certain file extension(s)

Author: Markus Jenni

I came across a requirement, that only pdf files should be allowed to be uploaded. As there are other file extensions allowed in further processes, we can not only limit the extensions globally.

To enforce this requirement, we first configured a validation rule, which basically did the trick.
However, from a user experience perspective, it would be great if the open file dialogue would only show pdf's:


How is it done:

1. Add a Html-Field to the form
2. Add the following JavaScript:

   <script>
   var attr = document.createAttribute('accept');
   attr.value=".pdf";
   document.getElementById("fileupload-add").setAttributeNode(attr);
   </script>

3. Don't forget to set the visible checkbox in the field matrix.

When loading the form, the accept attribute is being added to the input element 

The open file dialogue reflects the accept attribute and only shows the file types you configured.
You can also add more file extensions by using a column as a separator, e.g. ".pdf,.docx"