Formidable Forms

The Most Advanced WordPress Forms Plugin and Form Builder

  • Features
  • Pricing
  • Blog
  • Support
  • Login
  • Get Formidable Forms

File Upload

Last Updated: February 19, 2021

Knowledge Base → Forms → Form Building → Field Types → File Upload

— Premium Feature —

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.
WordPress file upload field drag and drop

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

Standard field options

A File Upload field field has the following standard options:

WordPress File Upload Field optionsWordPress File Upload Field options

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

Field specific options

Multiple files

Normally, just one file can be uploaded in a File Upload field, but you can allow multiple files to be uploaded. Open the field options, scroll down to File Upload Options and check 'Allow multiple files to be uploaded'.

Learn how to display files from a multi-file upload field.

When this option is selected, you will also have the option to limit how many files can be uploaded. See the File limits section for more information.

Delete files

By default, files uploaded in a File Upload field will remain on your site indefinitely. If you would like to automatically delete files when they are removed/replaced (in the File Upload field) or when their entry is deleted, you may open the field options, scroll down to File Upload Options, and select 'Permanently delete old files when replaced or when the entry is deleted'.

If you would like to delete files immediately after the entry is created (and after the email notification is sent), see the automatically delete files code snippet. You may use this code snippet if you do not want uploaded files stored on your site.

Email Attachment

Attach the uploaded file(s) to the email notification. Open the field options, scroll down to File Upload Options and select 'Attach this file to the email notification'.

If you have multiple notifications and would like to remove the attachment from some of the notifications then follow the link here.

Allowed file types

By default, any file types supported by your WordPress installation can be uploaded in a File Upload field, but you can limit the allowed file types. Open the field options, scroll down to Allowed file types, select 'Specify allowed types' and check the boxes for the file types you would like to allow. Only file types accepted by WordPress will be included in these options.
File Upload Allow File Types

If you would like to allow additional file types, take a look at the allow extra file types customization.

File limits

Set the size limit in MB, for each uploaded file. Open the field options settings, scroll down to File Upload Options, and insert the file size limit in the 'Max file size (MB)' box to set the max file size.

When the Multiple file upload option is selected, the 'Max files per entry' box will appear in the File Limits row. If you would like to limit the number of uploaded files, insert the maximum files per entry that you would like to allow.
File Upload Limit Files

Auto resize

When a large image is uploaded, it can be resized before it is saved to your site. To turn on automatic image resizing, check the 'Automatically resize files before upload' box. You can then set either the maximum image height or the width. Resized images will keep their original size ratio.
File Upload Auto Resize

Upload text

Change the message on a file upload field from 'Drop a file here or click to upload' to something else. If the upload field is using the frm_compact class, the default text can be changed from 'Choose File'.
File Upload Upload Text

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.

  • Add a class: Add a class on the file HTML.

    [x class="something"]

    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.
    WordPress File Upload Default File ID
  4. Go into edit your form and open the field options for the File Upload field.
  5. Scroll down to the Advanced section. In the 'Default value' box insert the media ID of the file from step 3.
    File Upload Dynamic Value
  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 Advanced section. In the '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.
    File Upload CSS Layout
  3. Save the form and click preview. Now when the page is visited, the File Upload field will be more compact.
    File Upload frm_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.
    WordPress File Upload Media Library List.
  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'.
    WordPress File Upload Media Files
  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 a Formidable form can be protected. See the General form settings for more information.

File protection also adds restrictions to prevent files from being accessed from another entry. This is a security measure to prevent visitors from changing the id of the file in the form to get access to other files. If there is a reason you would like the same files to be reused on multiple entries, add this custom code in your theme functions.php.

add_filter( 'frm_stop_file_switching', '__return_true' );

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.

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.

File upload "-1" error

If you're seeing a "-1" error when trying to upload a file on your form, this problem is most often related to a plugin or theme conflict. Generally, we have seen cases where a security plugin is causing this trouble. To troubleshoot this, start by finding the source of the conflict.

Uploaded file could not be moved

If you're seeing the "Uploaded file could not be moved to" error message, this problem usually means that there is something wrong with the permissions on your site at a server level.

To troubleshoot this, start by following the steps below.

  1. Try to upload the file in the WordPress → Media Library. Do you see the same error? If so, please contact your web host.
  2. If the upload is successful, change the folder permissions of the uploads/formidable folder, and each of the numbered folders inside it to 755.
  3. If the upload still fails and regular WordPress uploads are successful, open a ticket so our team can help investigate.

Disable scaling in images

In WordPress 5.3, users are allowed to upload big image files. It will be automatically scaled down once the image height or width is above the threshold value of 2560px.

To disable the scaling, you could use the snippet below.

add_filter( 'big_image_size_threshold', '__return_false' );

Related Customizations

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
    $mimes['ai'] = 'application/postscript'; //add ai
    $mimes['eps'] = 'application/postscript'; //add eps

    return $mimes;
}

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

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.

Translate the upload text

Translation options for the default Drop a file here or click to upload text are included in the PO file inside the plugin. See how to translate Formidable for more information.

Add front-end file download

If you would like to add front-end file download for uploaded files, see how to offer a protected file and download file on submit for more information.

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.
  • Only show first file from a multiple-image upload with the frmpro_fields_replace_shortcodes hook.
  • Link thumbnail to full size images from a multiple-image upload with the frmpro_fields_replace_shortcodes hook.
  • Move and rename file uploads with the frm_after_create_entry hook.
  • Standard field options
  • Field specific options
    • Multiple files
    • Delete files
    • Email Attachment
    • Allowed file types
    • File limits
    • Auto resize
    • Upload text
  • Field icons
  • Display images
    • Shortcode options
    • WordPress gallery
  • Set a default value
    • Use file from media library
    • Use file from previous entry
  • File upload classes
  • Manage uploaded files
  • File protection
  • Import files
  • Troubleshooting
    • Upload limits
    • Server responded with 0 code
    • File upload "-1" error
    • Uploaded file could not be moved
    • Disable scaling in images
  • Related Customizations
    • Allow extra file types
    • Prevent filtering of form uploads
    • Disable dropzone
    • Change the upload field label
    • Translate the upload text
    • Add front-end file download
  • Related developer hooks
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms
Install Formidable Lite

Using WordPress and want to get Formidable Forms for free?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact

Top Features

  • Front End Editor
  • Repeating Fields
  • Views from Entries
  • Calculator Forms
  • Conditional Logic
  • Visual Form Styler
  • Form Templates
  • User Submitted Posts
  • File Upload Forms
  • Spam Protection
  • Multi Page Forms
  • Surveys & Polls
  • Form Graphs & Charts
  • Save and Continue
  • Mobile Forms
  • Stripe Forms
  • PayPal Forms
  • WooCommerce Forms
  • MailChimp Forms
  • User Registration
  • Signature Forms
  • Bootstrap Forms
  • Quiz Maker
  • Zapier Forms
  • Salesforce Forms
  • HubSpot Forms
  • API Webhooks
  • Multilingual Forms
  • Directories

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • Blog

Copyright © 2021 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews