File Form Element
To add the file upload element to the form you need to create a new node and add it to the <fields> node of the configuration file, with the <frontend_type>file</frontend_type> and : <allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types>
To open a node for the new element, decide how you’d like that element to be called… Let’s just call it file_example.
|
1
2
3
|
<file_example>*** the rest of the code would go here ***</file_example> |
After you’ve created a node for file_example, you can add its label and form element type. To have the file_example form element select box, you would need to add the <frontend_type>file</frontend_type> in the file_example node, like so:
|
1
2
3
4
|
<file_example> <frontend_type>file</frontend_type> <allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types></file_example> |
Assuming that you’d like to have the label explaining the user what he needs to enter, you’d want to add the label to the file_example node, like so:
|
1
2
3
4
5
|
<file_example> <label>Please upload a file </label> <frontend_type>file</frontend_type> <allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types></select_example> |
And optionally, if you’d like this form field to be required, you’d want to add the required option to the file_example node like so:
|
1
2
3
4
5
6
|
<file_example> <label>Please upload a file </label> <frontend_type>file</frontend_type> <allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types> <required>true</required></select_example> |
In a case like this, where you would probably need to add further explanations of the field to notify the user, we recommend that you add a comment option like so:
|
1
2
3
4
5
6
7
|
<file_example> <label>Please upload a file </label> <frontend_type>file</frontend_type> <allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types> <required>true</required> <comment><![CDATA[ <p>Allowed file types: png, gif, jpg, jpeg, eps, ai, pdf. Not all browsers support all these formats!</p> ]]></comment></file_example> |
And it would produce this:
