A Complete Guide to the File Upload Field

Do you want to allow users to upload files on your site? The file upload feature in WPForms allows you to easily collect files and media through your online forms. In this guide, we’ll answer all of your questions about the file upload feature in WPForms.

Requirements: You will need a Basic license or higher in order to access File Uploads.

Creating a File Upload Form

Before getting started, you’ll first need to make sure that WPForms is installed and activated on your WordPress site.

Once you’ve got WPForms installed and your license is verified, you’ll be ready to either create a new form or edit an existing form.

After you’ve opened up your form builder, make sure that you’ve added a File Upload field to your form. You can add fields to your form by clicking on the field name in your form builder, or by dragging and dropping the field to your desired location.

add file upload

Allowed File Types for Upload

Security is a huge priority for us at WPForms, so we restrict file types to safe files only (the same file types allowed by WordPress core). These are:

  • Images like .png, .gif, .jpg
  • Documents such as .doc, .xls, .ppt, .pdf
  • Audio like .wav, .mp3, .mp4
  • Video like .mpg, .mov, .wmv
Adding Additional File Types

If you’d like your forms to support additional file types, be sure to check out our tutorial on how to allow users to upload additional file types.

Restricting File Types

To restrict which file extensions you’d like to allow for a specific form, click on the File Upload field in the form builder. Then, in the Field Options panel, you can specify the extensions you’d like to allow (separated by a comma) within the Allowed File Extensions field.

Restrict file extensions allowed for upload field

This will prevent files with any other extensions from being uploaded to your forms.

Maximum File Size for Uploads

By default, the maximum file size for your forms will be capped at the limit set by your server. To find out the server-defined maximum for your forms, click on the File Upload field in the form builder. Then, next to the Max File Size setting, click on the tooltip to reveal the maximum file size your server can handle.

maximum file size

If you’d like to further limit the maximum file size for your forms, you can do this by specifying a number in the Max File Size field.

Max File Size Setting

Note: If you’d like to increase the maximum upload size for your site, you’ll need to reach out to your hosting provider to find out if it’s possible. For more details, you can check out WPBeginner’s tutorial on increasing the maximum file upload size in WordPress.

Uploading Multiple Files

In order to upload multiple files at once, you’ll need to check that your File Upload field is configured to allow this. To do this, click the File Upload field to open up its field options.

Then, under Advanced Options, be sure to set the Style dropdown to Modern.

Select the Modern Style for WPForms File Upload field

This style is required before you can allow more than one file to be uploaded.

Once you’ve selected the Modern style, you’ll see a Max File Number option populate in the Field Options panel. By default, this will be set to 1, but you can increase this as needed.

Set the Max File Number for the WPForms File Upload field

Note: If you’re unsure whether your site’s hosting environment can properly handle the number of files you’d like to upload, be sure to do some testing before launching your form. You can also consider reaching out to your site’s hosting provider for their advice on uploads.

“Modern” vs. “Classic” Style

The File Upload field includes two style options that you can choose from: Classic and Modern.

To view these options, you’ll need to open the form builder and click on the File Upload field to see its Field Options. Then, click on the Advanced Options section to show additional settings.

Advanced Options in WPForms

The Advanced Options include a Style dropdown, where you can choose between Modern and Classic.

Style Options for File Upload

We share details about these style options below.

Modern Style

The File Upload field’s Modern style displays a drag-and-drop box. When a visitor uses your form, they can either click on this field to select files from their device, or they can drag files into the box.

Modern Style for File Upload field

This style also allows for multiple files to be uploaded to a single File Upload field.

Modern File Upload Example

The Modern style uses AJAX uploading to process file uploads. This is helpful because uploading files, especially large files, can demand a lot of resources from your site’s hosting server. This demand can ultimately result in a delay after your form is submitted.

However, AJAX uploading gets a jumpstart on this upload process to allow your forms to submit faster.

Classic Style

The File Upload field’s Classic style will display a Choose File button. Similar to the Modern style, users can either drag a file onto this button or click the button to select a file from their device.

However, the Classic style will not support multiple files to be uploaded into a single File Upload field.

Classic Style for File Upload field

Including File Upload Links in Notifications

By default, when a user submits a form with an uploaded file, you’ll receive a notification email containing a link to that uploaded file. This means you can quickly view or download the file without having to log into your WordPress dashboard.

File Uploads in Notification Email

Storing Uploaded Files

By default, the user-uploaded files are stored in the Uploads directory of your site, inside the WPForms folder.

However, if you’d prefer to upload your files to the WordPress Media Library, you’ll first need to click on the File Upload field in the form builder. Then, under Advanced Options, check the box next to Store file in WordPress Media Library.

Upload image to WordPress Media Library

No matter where you store your files, they can always be accessed in the Entries of your form, by clicking the link within an individual entry.

View uploaded file in Entry Area

If you’d like, you can also delete an uploaded file from within a specific entry by editing the entry.

Once you’ve opened up the entry editing panel, you can delete any uploaded files by clicking the red trash can icon.

After you’ve deleted the files you’d like removed from the entry, be sure to click the Update button to save your changes.

Compressing Uploaded Files

WPForms will not compress any files that are uploaded. However, if you choose to store your files in the WordPress Media Library, then WordPress will automatically compress your images.

Note: If you would like to optimize your images before uploading them to your site, then check out WPBeginner’s tutorial on how to easily optimize images for performance.

Frequently Asked Questions

I’d like to allow users to upload large files in my form, but it’s not working. What are my options?

When using the Modern style for File Uploads, WPForms automatically uploads any files in “chunks”. This improves the efficiency of the upload, and lets you avoid some limitations set by your server (including server timeouts).

This will help with a majority of large upload issues within a form, but it’s important to note that the maximum size of a file will still be limited by your server (through a setting named MAX_FILE_UPLOAD). This means that if your server has a limit for file size of 10 MB, you won’t be able to upload a file larger than that.

I’m not uploading a large file, but the file upload process freezes and never finishes. Why could that be?

Misconfigurations in your site’s SSL connection can prevent files from uploading properly. For example, if your site loads over an insecure (http) connection, but site assets (including uploaded files) load over a secure (https) connection (or vice versa). This will cause a mixed content error, and prevent files from uploading within your forms.

Your site’s host can easily update your SSL configurations, so be sure to get in touch with them if you run into this error.

Since file attachment can often hurt email deliverability, currently we don’t attach files on emails. For example, if an email provider only allows a maximum of 10MB attachment but the user uploads a file size higher than 10MB, the email won’t be delivered.

Why don’t my file uploads work in the Facebook and Instagram mobile browsers on Android devices?

Some in-app browsers currently don’t support file uploads, and the most notable examples of this are the Facebook and Instagram browsers.

The good news is, we’ve created a plugin that will fix this issue for our users. You can download the Escape Facebook/Instagram In-App Browsers plugin by clicking the button below:

Download the Escape Facebook/Instagram In-App Browsers Plugin

Once you’ve got that plugin downloaded, you’ll just need to install and activate it on your site.

That’s it! We’ve just covered the most common questions about using the file upload field in WPForms.

If you found this article useful, you might also want to check out how to create conditional form notifications in WordPress.