The file upload field lets the user choose one or more files from their device to be uploaded with the form when it is submitted. When the form is submitted file uploads can be saved to submissions, attached to emails or mapped to integrations where supported.
Demo
To learn how to add, edit, clone, move, resize, offset, or delete a file uploader, please click here.
To edit the settings for this field type, click the settings icon on the field itself. Click the Save & Close or Save button to save your changes. If you do not want to save your changes, you can click the Cancel button or click any other form element to close the field settings sidebar.
Basic
The basic tab contains settings that the majority of WS Form users will need to control a field. The settings are as follows:
Label
This is the label shown alongside the field. As well as entering a label into this field, you can also double click the label of the field in the editor. You should enter an easy-to-understand label for your field, for example, First Name or Email.
Show Label
If enabled the label will be shown on your form. If you do not want the label to appear for a particular field, uncheck this box.
Type
There are two types of file upload field:
- Default
- DropzoneJS
The DropzoneJS type has various performance advantages. Images are uploaded immediately when using the DropdownJS type whereas the default type uploads when the form is submitted. This can reduce the time it takes to submit a form. For images, the DropzoneJS type performs image resizing, format and quality changes in the browser as opposed to the server which can reduce file upload times.
Learn more about DropzoneJS here.
Required
If checked this field will be required when the website visitor completes your form. Failure to complete the field if this is checked will result in a validation message appearing under the field prompting the user to complete the field correctly.
Required fields are indicated on your website with the word Required being adding to the label of the field. This can be changed in the form settings advanced tab.
Hidden
If checked the field will be hidden on the form. It can be shown again using conditional logic or your own JavaScript.
Multiple
If this setting is enabled, the website visitor will be able to choose more than one file to upload.
Placeholder (DropzoneJS type only)
The placeholder setting is used to configure the text that shown in the DropzoneJS field prior to any files being added, in this case the user is prompted to drop files in the field.
Placeholder text is not stored when the form is saved or submitted.
WS Form variables or even an SVG can be entered into this field.
The following example adds text and an upload icon:
<p>Drop files here to upload.</p><svg height="48" width="48" viewBox="0 0 16 16"><path fill="#767676" d="M14.1 10.9c0-0.2 0-0.4 0-0.6 0-2.4-1.9-4.3-4.2-4.3-0.3 0-0.6 0-0.9 0.1v-2.1h2l-3-4-3 4h2v1.5c-0.4-0.2-0.9-0.3-1.3-0.3-1.6 0-2.9 1.2-2.9 2.8 0 0.3 0.1 0.6 0.2 0.9-1.6 0.2-3 1.8-3 3.5 0 1.9 1.5 3.6 3.3 3.6h10.3c1.4 0 2.4-1.4 2.4-2.6s-0.8-2.2-1.9-2.5zM13.6 15h-10.3c-1.2 0-2.3-1.2-2.3-2.5s1.1-2.5 2.3-2.5c0.1 0 0.3 0 0.4 0l1.3 0.3-0.8-1.2c-0.2-0.3-0.4-0.7-0.4-1.1 0-1 0.8-1.8 1.8-1.8 0.5 0 1 0.2 1.3 0.6v3.2h2v-2.8c0.3-0.1 0.6-0.1 0.9-0.1 1.8 0 3.2 1.5 3.2 3.3 0 0.3 0 0.6-0.1 0.9l-0.2 0.6h0.8c0.7 0 1.4 0.7 1.4 1.5 0.1 0.7-0.5 1.6-1.3 1.6z"></path></svg>
Directory (Regular type only)
If this setting is enabled, the website visitor will be able to choose from an entire directory with file contents (and any subdirectories) when uploading a file.
Capture
The capture setting is used to tell mobile devices whether or not to capture an image when the file field is tapped / clicked on. The available options are:
| Setting | Description |
|---|---|
| Off | The device will not capture a file. Instead the user is prompted to select a file. |
| On | The device will capture a file using the default camera. |
| User Facing Camera | The device will capture a file using the front facing camera. |
| Environment Facing Camera | The device will capture a file using the environment (rear) facing camera, if available. |
Help Text
The help text setting enables you to add smaller text under the field to assist the website visitor in completing that field.
As well as inserting plain text into this field, WS Form also provides extensive functionality for adding character and word count information. Click here to learn more about this functionality.
WS Form variables can be entered into this field.
File Handler
File handlers in WS Form determine the final destination of uploaded files when the form is submitted. You can specify different destinations for each file field on your form. This means you could have one field that saves files to a public location, and another that saves to a private location.
Save To
Use this setting to determine the final destination of the uploads files for this field when the form is submitted.
| Save To | Public | Media Library | Description |
|---|---|---|---|
| WS Form (Private) | No | No | This is the default handler. This handler saves file uploads in a protected hash format. These uploads are only accessible from within the WordPress admin. |
| WS Form (Public) | Yes | No | This handler saves file uploads in a format that can be accessed publicly. |
| Media Library | Yes | Yes | This handler saves file uploads to the WordPress Media Library. |
WS Form also has file handlers for:
Saved File Name
By default WS Form will save files using their uploaded file name.
The Saved File Name setting allows you to specify a custom file name mask for the saved file. The mask can include the following variables as well as WS Form variables, e.g. #field(123).
| Variable | Description |
|---|---|
#file_basename |
Original file name (e.g. file.jpg). |
#file_filename |
File name without extension (e.g. file). |
#file_extension |
File name extension (e.g. jpg). |
#file_index |
File upload index (e.g. 1). If you have enabled the Multiple setting, this will return the file index. If the Multiple setting is enabled and you exclude #file_index, WS Form will append this to your mask automatically. |
Other commonly used variables in file name masks include:
| Variable | Description |
|---|---|
#field(123) |
Returns the value of a field submitted in the form. Change 123 to match the ID of your field. |
#submit_id |
Returns the submission ID (Requires a Save Submission action) |
File names are sanitized prior to files being saved for security reasons.
Example Masks
Single File Upload: custom-#submit_id-#file_filename.#file_extension
Multiple File Upload: custom-#submit_id-#file_filename-#file_index.#file_extension
Preview
The file preview feature allows you to show a preview of the selected file underneath the field.
Enable (Default type only)
Check this setting to enable the preview feature.
Orientation
Previews can either be oriented in a vertical, horizontal or grid format. Use this setting to determine which orientation you would like the previews to appear in.
If you select grid, you can set a width for each preview at each breakpoint. If you only change the smallest breakpoint, all of the other breakpoints will inherit that width too. This enables you to create multi-column layouts if you enable the multiple upload setting and upload more than one file.
We recommend using and configuring the grid setting.
Image Optimization
For the default type, image optimization is performed on the server. For the DropzoneJS type, image optimization occurs prior to the image being uploaded.
Max Width (Pixels)
The maximum width in pixels the saved file should be. Leave blank for no change.
Max Height (Pixels)
The maximum height in pixels the saved file should be. Leave blank for no change.
Crop
If checked, images will be cropped to the maximum dimensions above using center positions.
Quality
Sets image compression quality on a 1-100 scale. Leave blank for no change.
File Format
The file format image uploads should be saved as.
Prefix / Suffix
The prefix and suffix settings allow you to add a prefix box and/or suffix box to the field.
For example, you could add a unit of measure as a suffix, or an @ symbol as a prefix.
Accessibility
ARIA Label
Accessible Rich Internet Applications (ARIA) defines ways to make web content and web applications more accessible to people with disabilities.
This setting enables you to define what text is made available to ARIA applications. This would, for example, provide a screen reader with specific text to read to someone with a disability.
The value of this setting defaults to your field label. If you would like to change this, enter a new value.
WS Form variables can be entered into this field.
Exclusions
Exclude From Emails
By default, WS Form uses the #email_submission variable in email templates. This provides a simple way of displaying all of the submitted fields in emails. Sometimes there might be a need to exclude a field from an email, for example, you might want to not include some introductory copy on a form, or hide a field you’re using with conditional logic to show or hide an element.
To hide a field from emails, check this box.
Other WS Form add-ons may add exclusions in this section too, such as the WooCommerce add-on which allows you to exclude certain fields from the cart entries.
Hidden Behavior
Always Include in Actions
This setting allows you to change the behavior of a field if the hidden setting is checked (See above), or if you set a field as hidden using conditional logic.
The normal behavior for a field that has been hidden is that it will not be included if an action has a Clear Hidden Fields setting enabled. For example, if you have a Send Email action, WS Form will not include fields that are hidden.
If this setting is checked, this field will always be included in actions if it is hidden.
Advanced
The advanced tab contains additional form attribute settings that provide further control over how a field is rendered.
Styles
Use the Styles settings to change the design of the file upload field.
Label Position
There are five options you can choose from for positioning your label:
- Default
- Top
- Left
- Right
- Bottom
The default position will place the label set in the Form Settings advanced tab. For new forms, this will be the Top positioning.
Note that when using some frameworks, some label positions may not be available.
Vertical Alignment
The vertical alignment option allows you to choose how this field will be vertically aligned in relation to fields in the same row. The options are:
- Top
- Middle
- Bottom
Classes
For developers WS Form allows you to add your own classes to fields.
Field Wrapper
The wrapper CSS class setting enables you to add a class (or classes) to a field wrapper. Field wrappers are sections of HTML added around a field to position them on the page. To add multiple classes, add a space between the class names.
Field
To add a class to the actual field element itself, enter a class (or classes) to this setting. To add multiple classes, add a space between the class names.
Restrictions
Field restrictions enable you to define what can or cannot be entered into the field.
Disabled
If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.
Minimum Files
Use this setting to specify the minimum number of files the user has to upload. Note that the Multiple option needs to be checked if this value is greater than 1.
Maximum Files
Use this setting to specify the maximum number of files the user can upload. Note that the Multiple option needs to be checked if this value is greater than 1.
Minimum File Size (MB)
Use this setting to specify the minimum size in megabytes file uploads should be.
Maximum File Size (MB)
Use this setting to specify the maximum size in megabytes file uploads can be.
Timeout (ms) (DropzoneJS type only)
The timeout for the XHR requests in milliseconds. Leave blank for 30 seconds.
Accepted File Types(s)
You can limit the types of files that can be uploaded by specifying one or more MIME types or file extensions in this field. Multiple types should be separated by commas.
MIME type example: application/pdf,image/jpeg
File extension example: .pdf,.jpg (Note that periods must be included)
This would limit the file uploads to PDF documents or JPG images.
A list of some of the most common MIME types can be found by clicking here.
User Status
Choose from one of the options to filter which user status can see this field:
- Any
- Is Logged In
- Is Logged Out
- Has User Role or Capability
If you choose Has User Role or Capability, additional settings will appear that enable you to choose one or more roles or capabilities.
If checked the field will be disabled, and it cannot be interacted with. You can re-enable a field dynamically by using conditional logic.
Image Restrictions
Image restrictions enable you to define what can or cannot be uploaded to the field if the file is an image.
Minimum Width (Pixels)
Enter the minimum width in pixels the image has to be.
Maximum Width (Pixels)
Enter the minimum width in pixels the image has to be.
Minimum Height (Pixels)
Enter the minimum height in pixels the image has to be.
Maximum Height (Pixels)
Enter the maximum height in pixels the image has to be.
Required Aspect Ratio
Enter the aspect ratio the image has to be in. It should be entered in the format x:y.
Example aspect ratios are:
1:116:94:3
Validation
Show Invalid Feedback
Invalid feedback text is shown when a form is saved or submitted and the field has not been completed according to the field settings you have configured. For example if the minimum character count is 10 and you enter 5 characters and then submit the form, the field will be deemed invalid. If this setting is checked, invalid feedback is shown under the field.
Invalid Feedback Text
WS Form automatically builds invalid feedback text for all of your fields. If no text is entered into this field, the value shown in the field in light gray text will be shown. If you would like to specify alternative invalid feedback text, you can enter it within this setting.
WS Form variables can be entered into this field.
Custom Attributes
This setting is used to add custom attributes to the HTML of this field, such as data-my-attribute="1234". You can add as many custom attributes as you need.
To add a custom attributes key value pair:
- Click the Add icon to add a custom attribute row.
- Enter the key in the left column.
- Enter the value in the right column.
- Click Save to save the custom attributes.
Breakpoints
The breakpoint settings define the width of a field and also what the offset (how many columns from the left-hand side of the form or the previous field) of a field is for each breakpoint. For more information about the breakpoint settings and capabilities of WS Form, click here.