Do you desire to permit 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 testify you how to apply the file upload field in WPForms.

  • Creating a File Upload Form
  • Allowing File Types for Upload
    • Adding Allowed File Types
    • Restricting File Types
  • Setting the Maximum File Size for Uploads
  • Choosing Between the "Modernistic" vs. "Classic" Styles
  • Uploading Multiple Files
  • Including File Upload Links in Notifications
  • Storing Uploaded Files
  • Compressing Uploaded Files
  • Frequently Asked Questions

Before getting started, you'll need to brand sure that WPForms is installed and activated on your WordPress site. Once you verify your license, either create a new form or edit an existing one.

Creating a File Upload Form

After you lot've opened the course builder, add a File Upload field to your course. You tin add fields to your form by clicking on the field proper name on the left side of the form builder, or past dragging and dropping the field to your desired location in the preview area.

Adding a File Upload field

Allowing File Types for Upload

Security is a huge priority for the states at WPForms. By default, we simply permit uploads of safe file types (the same ones allowed past WordPress core). These are:

  • Images like .png, .gif, .jpg
  • Documents such as .doc, .xls, .ppt, .pdf
  • Sound like .wav, .mp3, .mp4
  • Video like .mpg, .mov, .wmv

Adding Allowed File Types

If you'd like your forms to support additional file types, be sure to bank check out our tutorial on how to let users to upload boosted 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 grade builder. Then, in the Field Options panel, you tin specify the extensions you'd like to allow (separated by commas) in the Allowed File Extensions field.

Allowing file types for a File Upload field

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

Setting the 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, adjacent to the Max File Size setting, hover over thequestion mark (?) icon to reveal the maximum file size your server tin can handle.

Viewing the maximum file upload size for the server

If y'all'd like to further limit the maximum file size for your forms, you can do and so by specifying a number in the Max File Size field.

Limiting the maximum file size users can upload to a form

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

Choosing Between the "Mod" vs. "Classic" Styles

The File Upload field includes two way options that you tin can cull from: Classic and Mod.

To view these options, you'll need to open the grade builder and click on the File Upload field in the preview expanse to see its field options. Then, click on the Advanced tab to show additional settings.

Accessing the advanced field options for a File Upload field

The advanced options include a Style dropdown, where you can choose between Modern and Classic.

Choosing between the Modern and Classic File Upload styles

Modern Mode

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

The Modern File Upload style

This style likewise allows users to upload multiple files to a single File Upload field.

The Modern style uses AJAX uploading to procedure file uploads. This is helpful considering uploading files, specially large files, can demand a lot of resources from your site's hosting server and ultimately issue in a delay later your class is submitted.

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

Classic Manner

The File Upload field's Archetype fashion will display a Choose File push. Similar to the Modernistic style, users can either drag files onto this button or click the push to select files from their devices.

The Classic File Upload style

However, the Classic mode does not support multiple files to exist uploaded to a single File Upload field.

Uploading Multiple Files

In order to let your users upload multiple files at once, you'll need to bank check that your File Upload field is configured to permit this. To exercise so, click the File Upload field to open its field options.

So, in the Advanced tab, set the Style dropdown to Modern if it's not already.

Setting the File Upload field style to Modern

This fashion is required before you tin allow users to upload more than than ane file to this field.

Return to the General Field Options tab and look for the Max File Number setting. By default, this will exist ready to 1, but yous can increase it as needed.

Setting the Max File Number

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

Including File Upload Links in Notifications

Yous tin can utilize the {all_fields} or {field_id} Smart Tags to include uploaded files in your notification emails.

If you lot do so, your email notifications will contain links to the uploaded files.

A link to an uploaded file in an email notification

This way y'all tin can quickly view or download the file without having to log in to your WordPress dashboard.

Storing Uploaded Files

By default, 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, navigate to theAdvanced tab in the Field Options panel and toggle on the Shop file in WordPress Media Library option.

Turning on the setting to store file uploads in the Media Library

No matter where you shop your files, you can always access them in the Entries for your form by clicking the file'south link within an private entry.

Viewing a file upload link for an entry

If you lot'd similar, you tin as well delete an uploaded file from a specific entry by editing the entry. Just click the scarlet trash tin icon next to the file'south link.

Deleting a file upload from an entry

Annotation: If you lot've configured your File Upload field to store uploads in the Media Library, you lot will take to delete the file from the Media Library.

Afterwards yous've deleted the files you'd like removed from the entry, be certain to click the Update button to relieve your changes.

Saving changes to an entry

Compressing Uploaded Files

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

Frequently Asked Questions

These are some of the almost common questions that come up regarding the File Upload field.

I'd like to allow users to upload large files in my form, but information technology'due south not working. What are my options?

When using the Modern style for file uploads, WPForms automatically uploads files in "chunks." This improves the efficiency of the upload and lets you avoid some limitations gear up by your server (including server timeouts).

This volition assist with the majority of large upload issues within a form, but information technology'southward important to note that the maximum size of a file volition yet be limited by your server through a setting named MAX_FILE_UPLOAD. This ways that if your server has a file size limit of 10 MB, yous won't be able to upload a file larger than that.

If you'd similar to look into adjusting your server's file upload size limits, please contact your hosting provider. To larn more, run into WPBeginner's tutorial on increasing the maximum file upload size in WordPress.

Cloudflare users should note that upload limits are determined by programme type. The electric current limits are as follows:

  • Costless and Pro: 100 MB
  • Business organization: 200 MB
  • Enterprise: 500 MB (contact back up for customization)

For more than data, delight see Cloudflare'southward upload size limits.

I'm not uploading a large file, merely the file upload procedure freezes and never finishes. Why could that be?

Misconfigurations in your site'southward SSL connection tin can forestall files from uploading properly.

For case, you may experience this issue if your site loads over an insecure (HTTP) connexion, but site assets such every bit uploaded files load over a secure (HTTPS) connection (or vice versa). This will crusade a mixed content fault, and prevent files from uploading in your forms.

Your site's host can hands update your SSL configurations, so be sure to get in touch on with them if you run into this error. You lot may also desire to check out WPBeginner'southward guide to troubleshooting SSL problems in WordPress.

File attachments can often injure email deliverability. For example, if an electronic mail provider only allows a maximum attachment size of 10MB just a user uploads a file larger than 10MB, the e-mail won't be delivered.

To improve deliverability, we don't currently attach files to emails.

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

Some in-app browsers currently don't support file uploads. 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 consequence for our users. Y'all 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 download the plugin, you'll just need to install and activate information technology on your site.

That's it! You now know how to apply the File Upload field in WPForms.

Side by side, want to learn how to send different notification emails based on how users fill out your form? Check out how to create provisional form notifications in WordPress for a full tutorial.