File Upload - Formidable Forms

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

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 options

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

Any file types supported by your WordPress installation can be uploaded in a File Upload field. Since 5.0.12, all new File Upload fields will only allow images (jpg, jpeg, jpe, png, gif) by default. If your form allows public uploads (from untrusted users), allowing PDFs can be a security risk.

To limit the allowed file types, scroll down to Allowed file types in the field options, select Specify allowed types, and check the boxes for the file types you would like to use. In these options, only file types accepted by WordPress will be included.
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.

Go to your WordPress Media → Library.
Select the WordPress file you want to use as your default value.
The media ID will be in the address bar. Copy it.
Go into edit your form and open the field options for the File Upload field.
Scroll down to the Advanced section. In the 'Default value' box insert the media ID of the file from step 3.
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.

Go into edit your form.
Open the field options for the File Upload field.
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.
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.

Open the field options.
Scroll down to CSS layout classes. Insert frm_compact in the box.
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.

Go to your WordPress Media → Library.
Click the list view icon.
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'.
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. With file protection enabled:

Files can only be reached when clicking a link directly to the file from within site.
Links clicked from an email will be blocked.
Logged-in status doesn't affect this.

See the General form settings for more information.

File protection 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.

Notes:

New uploaded files will use file protection even when file protection is turned off before the form has been submitted.
File access for most file types is limited to users with the frm_edit_entries capability only.
All new files will include X-Robots-Tag: noindex to ensure that search engines never crawl new temporary files.

To improve file upload security for unprotected forms, use the frm_stop_file_switching filter and return false.
If you would like the same files to be reused on multiple entries, use the frm_stop_file_switching filter and return true.
To remove protection for temporary files, use the frm_protect_temporary_file hook.

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.

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

File upload "0 b" value

If you see a 0 b message when uploading a file to your form, you may have added an incorrect default value.
File upload 0 b value
When setting a default value, you can either use a file from the media library or use a file from a previous entry.

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' );

File type is not permitted for security reasons

If you have already set up your site to allow extra file types like XML, it may return a "Sorry, this file type is not permitted for security reasons" error message. To fix this, go to the wp-config.php file and add the following code snippet above the line:
/* That’s all, stop editing! Happy blogging. */

define('ALLOW_UNFILTERED_UPLOADS', true);

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

    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.

add_action( 'pre_get_posts', 'frm_remove_media_filtering', 1 );
function frm_remove_media_filtering () { 
    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' );

If you want to turn off dropzone on one page, use the frm_load_dropzone hook.

Block dropzone action

To disallow uploads that happen before the entry is created, use the code snippet below to block the dropzone action.

add_action('wp_ajax_nopriv_frm_submit_dropzone', 'block_dropzone_uploads', 1 );
add_action('wp_ajax_frm_submit_dropzone', 'block_dropzone_uploads', 1 );
function block_dropzone_uploads() {
    $target_field_id = 996; // change 996 to the file upload field ID
    $field_id = FrmAppHelper::get_param('field_id', '', 'post', 'absint' );
    if ( $target_field_id === $field_id ) {
        wp_die( 0 );
    }
}

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.

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.