Product Personalization Tutorial - File Form Element

Product Personalization Tutorial – File Form Element

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:

09-file-upload-example

Share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *