File Upload

A WordPress File Upload field allows users to easily upload files in a form. You can click to add files or drag and drop files into the field. The uploaded files are stored in your WordPress Media Library in the location specified in your WordPress settings.

Standard field options

A File Upload field field has the following standard options:

• Field type
• Required
• Read Only
• Field key
• CSS layout classes
• Label position
• Visibility
• Conditional logic
• Dynamic default value

Field specific options

Field icons

Field action icons allows you to duplicate, delete, and/or move a field on the form builder page. See the field action icons article for more information.

Display images

Display uploaded files in a form's confirmation message, email, or View.

Shortcode options

• File URL: Display the URL of the uploaded file(s):
  

  [x]

  Replace x with the ID of the file upload field.

• Show image: Display the image if the WordPress file is an image file type. Display an icon if the file is not an image.
  

  [x show_image=1]

  Replace x with the ID of the file upload field.

• Add link: Link to the full-sized image. This may be used in conjunction with show_image=1, show_filename=1, or any other File Upload shortcode parameters.
  

  [x add_link=1]

  Replace x with the ID of the file upload field.

• Open link in new tab: Open the link to the image in a new browser tab. The new_tab=1 parameter must be used in conjunction with the add_link=1 parameter.
  

  [x add_link=1 new_tab=1]

  Replace x with the ID of the file upload field.

• Image size: Set the image display size using either size=thumbnail, size=medium, or size=full. The default size displayed is the thumbnail. In WordPress, the default thumbnail size is a 150x150 image. Specify a different size to show a bigger image.
  

  [x size=full show_image=1]

  Replace x with the ID of the file upload field.

• Show filename: Display the filename of an uploaded WordPress file.
  

  [x show_filename=1]

  Replace x with the ID of the file upload field.

• Show attachment ID: Display the attachment ID of an uploaded file.
  

  [x show=id]

  Replace x with the ID of the file upload field.

• Show default image: Check for an image and add a default if there isn't one.
  

  [if x][x show_image="1"][/if x]
  [if x equals=""]<img src="default.png" alt="" />[/if x]

  Replace x with the ID of your file upload field. Replace default.png with the path to your default image.

WordPress gallery

Display uploaded images in a WordPress gallery using this shortcode:

[gallery ids="[x show=id sep=',']" link="file"]

Replace x with the ID of your File Upload field . Read more about the gallery shortcode and its parameters in the WordPress Codex.

Set a default value

Autopopulate the File Upload field with a file of your choosing.

Use file from media library

If you would like to set a default value in your File Upload field with a file from your WordPress media library, please follow the steps below.

1. Go to your WordPress Media → Library.
2. Select the WordPress file you want to use as your default value.
3. The media ID will be in the address bar. Copy it.
   
4. Go into edit your form and open the field options for the File Upload field.
5. Scroll down to the Dynamic Values section. In the 'Dynamic default value' box insert the media ID of the file from step 3.
   
6. Save the form and click preview. Now when the page is visited the default file will appear in the File Upload field.
   

For more information on default values, visit the Default values page.

Use file from previous entry

If you would like to automatically populate a File Upload field with the most recent value submitted by the current user, follow the steps below.

1. Go into edit your form.
2. Open the field options for the File Upload field.
3. Scroll down to the Dynamic Values section. In the 'Dynamic default value' box insert the following shortcode:
   

   [frm-field-value field_id="x" user_id="current" show="id"]

   Replace x with the ID of the File Upload field that you want to retrieve a value from.

4. Save the form and click preview. Now when the page is visited, the uploaded file from the user's previous entry will be shown. If the user is not logged-in, this shortcode will have no effect.
   

File upload classes

If you would like the File Upload field to take up less space in your form, you may use the frm_compact class.

1. Open the field options.
2. Scroll down to CSS layout classes. Insert frm_compact in the box.
   
3. Save the form and click preview. Now when the page is visited, the File Upload field will be more compact.
   

Manage uploaded files

All files that are downloaded in a Formidable form are saved to your WordPress media library. To access the uploaded files, follow the instructions below.

1. Go to your WordPress Media → Library.
2. Click the list view icon.
   
3. In the filtering menu, change 'Hide form uploads' to 'Show form uploads' if you would like to see files uploaded in your forms. Click 'Filter'.
   
4. Now all the files that have been downloaded in a Formidable form should appear here in the list view.

If you would always like to view your form uploads in the media library, see the prevent filtering of form uploads section.

File protection

All files uploaded through your Formidable form can be protected. See the General form settings for more information.
* Please note that file protection is limited to Apache servers. File privacy on Nginx servers is not yet supported.

Import files

If you would like to import files from entries on one site into entries on another site, see Import files for more information.

Allow extra file types

If you would like to allow file types than are not allowed in WordPress by default, you'll need some custom code.

add_filter('upload_mimes','restrict_mime');
function restrict_mime($mimes) {
    $mimes['mp4'] = 'video/mp4';
    $mimes['csv'] = 'text/csv'; //allow csv files
    $mimes['avi'] = 'video/x-msvideo'; //add avi
    $mimes['mov'] = 'video/quicktime'; //add mov
    $mimes['epub'] = 'application/epub+zip'; //add epub

    return $mimes;
}

This is a WordPress filter (not Formidable). You can find more information on this filter in the WordPress codex.

Click here for a list of file extensions along with their MIME type.

Prevent filtering of form uploads

If you would like to prevent the filtering of files that have been uploaded through formidable forms in your WordPress media library, insert the following code in the 'Code Snippets' plugin or a child theme’s functions.php file.

remove_action( 'pre_get_posts', 'FrmProFileField::filter_media_library', 99 );

Disable dropzone

Disable the ajax uploader and revert to a standard uploader with the code below.

add_filter( 'frm_load_dropzone', '__return_false' );

Change the upload field label

The default 'Drop a file here or click to upload' message can be changed with a bit of javascript. Click here to see an example.

Troubleshooting

Upload limits

File upload size and quantity limits are set in your server's php.ini. If you have a problem uploading a file in your form, first try uploading the same file on the WordPress → Media Library. If you see the same error here, then you are facing upload limits. You (or your host) may need to increase the max_file_uploads, max_input_time, post_max_size, and/or upload_max_filesize settings in your php.ini.

In WordPress Multisite, the upload limits can be customized in 'Network Admin' → 'Settings' → 'Upload Settings'.

Server responded with 0 code

When ajax requests are fired in WordPress, 0 is returned when the request isn't processed. We have seen cases where 0 is returned by the file uploader, even though the code is there to process it.

The most likely cause is a plugin or theme conflict. Start by checking for a conflict.

If the problem continues with all other plugins disabled, there may be an issue with your server settings. In some cases, this happens when there a page is loaded with a different URL than the one set as the site URL in the WordPress Settings. To solve the problem, you will need to add a redirect rule in your .htaccess that will redirect to the correct url. This is also better for SEO.

Related developer hooks

• Customize the location of your uploaded files using the frm_upload_folder hook.
• Automatically delete WordPress files after the entry is created (and after the email notification is sent) with the frm_after_create_entry hook.
• Remove attachments from notifications with the frm_notification_attachment hook.
• Format multiple files differently than the default HTML with the frmpro_fields_replace_shortcodes hook.
• Use Base64 file info with the frmpro_fields_replace_shortcodes hook.
• Create a custom field that stores the file URL with the frm_new_post hook.
• Add image meta with the frm_after_create_entry hook.