Plugin Planet

Premium WordPress Plugins

As of version 2.0, USP Pro supports unlimited File Upload fields in any form. This extensive tutorial explains the various types of File(s) fields and how to implement them in your own forms.

Video Tutorial

Types of Files fields

Currently there are four types of File(s) fields that may be used for file uploads:

  • Primary Files Field – via the [usp_files] shortcode
  • Custom Files Field – via adding field#input_file to any custom-field definition
  • Custom Prefix Files Field – same as Custom Files but with a custom prefix defined in Advanced settings
  • Custom Custom Files Field – same as Custom Files but with a custom field defined in Advanced settings

For the most part, these four types of File(s) fields can be customized and combined as desired. Let’s go through each type of field and see how they work.

Primary Files Field

Primary form fields include things like Post Title, Post Content, Post Author, and so forth. With USP Pro, each Primary Field has its own Quicktag. This is true for the Primary Files Field as well, which has its own shortcode, [usp_files], and its own Quicktag, USP:Files. Thus, to add a files field to the form, the easiest way to get there is to click the USP:Files quicktag button and specify your attributes as desired.

You can add one File(s) field per form using the [usp_files] shortcode. To customize its attributes, such as multiple files, min/max files, and so forth, refer to the USP Files Shortcode Reference. Here is a quick example:

[usp_files multiple="true" required="true" files_max="3"]

Here we are adding a File(s) field that accepts multiple files, is required, and has a maximum file limit of three files.

NOTE: Use only one [usp_files] shortcode per form. For additional File(s), use any combination of the following fields.

Custom Files Field

The second type of File(s) field is created via Custom Field. To make any custom field a File(s) field, first define the field as such by including field#input_file in the custom-field definition. For example:

field#input_file|method#select|multiple#true|data-required#true|files_min#1|files_max#3

Here we are defining a custom File(s) field that is displayed as a select/dropdown menu, accepts multiple files, is required, allows a minimum of one file, and allows a maximum of three files. After this field is defined, we can add it to the form by copying/pasting its shortcode, which will look something like this:

[usp_custom_field form="3510" id="3"]

Here, form is the form ID, and id is the custom field ID. So they will vary depending on your form and whichever custom field you are working with. You can use any valid attributes to define as many Custom Files fields as required.

Custom Prefix Files Field

Custom Prefix Fields work the same way as Custom Fields, with the exception that you can specify your own name prefix. So instead of using the default prefix, usp-custom-, you can define a prefix to be like, whatever-prefix-. You can learn more about custom prefixes here and here. Once you understand how they work, consider the following example:

field#input_file|name#myprefix_myfieldname|for#myprefix_myfieldname|method#select|multiple#true|data-required#true|files_min#1|files_max#3

Here we are defining a custom File(s) field that:

  • Uses a custom prefix of myprefix_ for the “name” and “for” attributes
  • Uses a field name of myfieldname for the “name” and “for” attributes
  • Displays as a select/dropdown menu
  • Accepts multiple files
  • Is a required field
  • Allows a minimum of one file
  • Allows a maximum of three files

To reiterate, the only real difference between the Custom Prefix Field and a regular Custom Field is the use of the custom prefix. So if you are working with a custom prefix and need a File(s) field, this is the way to go. Further, you can use any valid attributes (see below) to define and customize any number of Custom Prefix Files Fields.

Custom Custom Files Field

Last but not least, it is possible to add Custom Custom Files Fields to any USP Pro Form. Custom Custom Fields work the same way as Custom Fields, with the exception that their names are defined in the Advanced settings > Custom Custom Fields. You can learn more about them in the tutorial, Custom Field Options. Here is an example:

field#input_file|name#my_custom_custom_field|for#my_custom_custom_field|method#select|multiple#true|files_min#1|files_max#3|types#jpg,png

Notice the similarity between Custom Fields and Custom Prefix Fields. The only difference here is that the field name is defined in the Custom Custom Fields setting. Here we are using a custom-custom name of my_custom_custom_field, which also is used for the for attribute (so the field and label will match up).

So, as with Custom Fields and Custom Prefix Fields, we can define and use as many Custom Custom Fields as desired to any USP Pro Form. We can mix and match, add multiple fields, and customize fields using any available attribute (see next section).

Attributes for Files Fields

Here is a list of attributes that may be used in the various types of File(s) fields.

Primary Files Field

The following attributes may be used with the [usp_files] shortcode.

  • class – any additional class names, comma-separated
  • placeholder – placeholder text (default: “File(s)”)
  • label – label text (default: “Post Content”)
  • required – should the input be required (“yes” or “no”)
  • max – maximum number of characters (default: “255”)
  • link – text for the “Add another file” link (when included)
  • multiple – enable multiple file uploads (default true)
  • method – file-selection method: “select” = select multiple files from the “Choose files” prompt; or leave blank to use the “Add another file” link
  • key – specify an optional numeric key value (applies only when “multiple” is set to false)
  • types – comma-separated list of allowed file types (overrides default/global settings, see Uploads Settings)
  • custom – any valid attribute, for example: id='custom' (use single quotes)
  • preview_off – set to “true” to disable previews; exclude from shortcode to enable previews
  • files_min – the minimum number of files allowed (default: value of the option, Uploads > Minimum number of files)
  • files_max – the maximum number of files allowed (default: value of the option, Uploads > Maximum number of files)
  • fieldset – enable auto-fieldset: true, false, or custom class name (default: true)

Check out the Complete USP Files Reference »

Custom Files Field

Attributes listed below may be used for any Custom Files Field, including Custom Files, Custom Prefix, and Custom Custom.

  • field – input (default), textarea, select, input_checkbox, input_radio, input_file
  • name – specifies the name attribute. If name is specified, it must match the value of the for attribute, if included (default: custom field #)
  • data-required – true (default), false, or null (to disable)
  • class – additional classes for input (default: none)
  • accept – MIME type, eg: audio/*, video/*, more (default: image/*)
  • field_class – additional classes for fieldset (default: none)
  • fieldset – enables disabling of fieldset (use fieldset#null)
  • label – label text (default: “Example Label #”). Note: use label#null to disable the field label.
  • for – specifies the for attribute of the
  • label_class – additional classes for label (default: none)
  • label_custom – custom string for label (default: none)
  • custom_1 thru custom_5 – custom field attributes (anything not listed above). Syntax: custom_1#attribute:value, where “attribute” is the name and “value” is the value. (default: none)
  • multiple – enable user to select multiple options, “true” or “false” (default: false)
  • method – method of selecting multiple files, either “select” for select/dropdown menu, or leave blank to use “Add another” link (default: “Add another” link)
  • link – text to use for the “Add another” link (default: “Add another”)
  • types – allowed file types, comma separated (default: value of the option, Uploads > Allowed File Types)
  • max – maximum number of characters allowed in the selected file path (default: 255)
  • preview_off – set to “true” to disable file preview, or exclude to enable file preview (default: file preview enabled)
  • files_min – the minimum number of allowed files (default: value of the option, Uploads > Minimum number of files)
  • files_max – the maximum number of allowed files (default: value of the option, Uploads > Maximum number of files)
  • data-custom#custom-att – any name/value pair will be included in the custom field, for example id#custom will add an id attribute with a value of custom (e.g., id="custom")

Check out the Complete Custom Fields Reference »

Summary

USP Pro provides four types of File(s) uploads fields. With the exception of [usp_files], File(s) fields can be combined, duplicated, and customized as desired for any USP Form.

The easiest way to add a File(s) field is to click the USP:Files Quicktag, which will add the [usp_files] shortcode to the form. You can customize the field via shortcode attributes. For advanced configuration, you can use any combination of Custom Fields, including Custom Files, Custom Prefix, and Custom Custom fields.

Bottom Line: USP Pro enables unlimited customized File(s) fields in any USP Form.

Resources & References