The File upload element is a form element that lets the user upload files.

File upload element example

Settings

Basic

Label

Sets the label of the element.

Description

Sets description text to display below or above the field.

Required

Sets the field to be required, i.e. the user must complete this field.

Styles

Label icon

Choose an icon to display in the label.

Enable enhanced uploader

Enables the enhanced file uploader which shows the upload progress in modern browsers, and lets users add or remove files.

Enhanced uploader style

Sets the style of the enhanced uploader, the choices are:

  • Button
  • Dropzone

Both options support dropping files but the dropzone has a larger area.

Button style

If Enhanced uploader style is set to Button, choose the style of the button.

Button size

If Enhanced uploader style is set to Button, choose the size of the button.

Button width

If Enhanced uploader style is set to Button, choose the width of the button.

Button custom width

If Button width is set to Custom…, enter a custom button width using any CSS value.

Button icon

If Enhanced uploader style is set to Button, choose the the button icon.

Button icon position

If Enhanced uploader style is set to Button, choose the the button icon position.

Dropzone icon

If Enhanced uploader style is set to Dropzone, choose the the dropzone icon.

Dropzone icon position

If Enhanced uploader style is set to Dropzone, choose the the dropzone icon position.

Upload list layout

Choose the layout of the files in the upload list.

Upload list size

Choose the size of each file in the upload list.

Field width

Sets the width of the field, choose one of the preset sizes or choose a custom width. The width only applies when the enhanced uploader option is disabled or not supported in the browser.

Field custom width

If Field width is set to Custom enter a custom width using any CSS value.

Custom CSS class

Add a custom CSS class to the field, or multiple classes separated by a space.

CSS styles

Add custom CSS styles to any part of this element by clicking Add a style, choose the selector that the style should apply to and enter the CSS into the box.

Labels

Sub label

Sets a small text label below the field.

Admin label

Sets the admin label which allows you to have different label text for the element when viewing entries and within notification emails than the label text shown in the form.

Tooltip text

Sets the tooltip text which is shown in a small popup when the user interacts with the tooltip trigger.

Tooltip trigger

Choose what the user will be interacting with to show the tooltip, currently the only choice for this element is Icon.

Tooltip event

Choose the event that will trigger the tooltip to show, the choices are Hover, Click, or Inherit which will inherit the setting from the parent Group, Page or Form setting.

Label position

Choose where to display the label relative to the field, the choices are Above, Left or Inherit which will inherit the setting from the parent Group, Page or Form setting.

Label width

If the Label position is set to Left enter a custom label width using any CSS value.

Logic

Enable conditional logic

Enable or disable the conditional logic for this element.

Logic rules

Add a logic rule to this element by clicking Add logic rule, then choose the element, operator and value that will trigger the rule.

Data

Minimum number of files

Enter the minimum number of uploaded files required, enter 0 to have no specific number of files required. One file will still be required if this field is Required.

Maximum number of files

Enter the maximum number of uploaded files allowed, enter 0 for no limit.

Allowed file extensions

Enter the file extension excluding the dots and separated by commas e.g. jpg, jpeg, png, gif.

Maximum allowed file size

Enter the maximum allowed size of a file in MB. Note that some PHP configuration settings might need their limits increased to allow larger file uploads, see the relevant settings below. If in doubt contact your system administrator.

The total of all maximum allowed file sizes for all the upload fields in the form multiplied by the maximum allowed number of files should be less than the PHP setting post_max_size. Note that when using the enhanced uploader each file is uploaded in a separate request so this limit can be much lower, however if the browser does not support the enhanced uploader or if JavaScript is disabled all files will be uploaded in a single request.

The maximum file size of a single file upload should not exceed the PHP setting upload_max_filesize.

If you are attaching the file to the notification email, you should make sure that the PHP setting memory_limit is about 8-10 times the maximum file size.

If you are not attaching the file to the email, you might not need to adjust the memory limit. If in doubt, upload a test file at your maximum limit and see if the form works correctly.

Save uploaded files to the server

If enabled, the uploaded files will be saved to the server.

Path to save uploaded files

The path to save the files inside the WordPress uploads directory. The following variables can be used in the path for dynamic replacement.

  • {form_id} = the form ID
  • {year} = the current year
  • {month} = the current month
  • {day} = the current day

Show in email

If enabled, the submitted element data will be shown in the default notification email.

Save to database

If enabled, the submitted element data will be saved to the database and shown when viewing an entry.

Advanced

Unique ID

The unique element identifier is displayed here, you may need this for advanced usage.

Visibility

Sets the element to only be visible when viewing/editing entries (Admin only), or only visible to logged in or logged out users.

Translations

The text of any relevant settings can be translated here.

Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy