The File Upload element lets your customers attach files such as images, documents, or videos to the form. This is useful when they need to provide supporting information that can’t be entered in standard fields like text boxes or number inputs.
When you should use file upload
- If supporting documents are required, such as proof of identity or evidence of an issue
- When the information can't be provided in standard form fields.
When you should avoid file upload
- If the information can be provided using standard form fields like text elements instead
- If sensitive personal or financial information is being collected - make sure you have processes in place to handle and safely secure the information before you use this element.
Guidelines
Do:
- Clearly explain what your customers need to upload (e.g. a video of the issue you are experiencing)
- Ensure you allow for common file types, and the size limit isn't too restrictive (e.g. Accepted formats: PDF, JPG, PNG. Max file size: 10MB.”)
- Provide context for why the files are needed, and how they would be used
- If possible, provide an alternative for customers who may struggle with uploading the files (e.g. due to poor internet connection). Alternatives could include an email address or postal submission.
Don't:
- Request sensitive or personal information unless you have secure data handling processes in place
Add a file upload
- Navigate to Structure > Webforms > Forms and locate your webform by typing its name into the search.
- Open your webform and navigate to Build > + Add element.
- In the Select an element popup, select the File element.
- Complete the Add File element form:
- Title: name of the element
-
Allows number of values:
- Limited: Set the number of file(s) the element can be uploaded
- Unlimited: No maximum on the number of file(s) that can be uploaded
- Maximum file size: How maximum limit of how big of a file can be uploaded - the limit is 25MB
- Allows file extensions: What type of files can be uploaded. When allowing more than one file type, separate the file extensions by a space or comma.
- Description: Helper text to guide customers on using this element
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.