Exercise yous 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, nosotros'll evidence you how to use the file upload field in WPForms.

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

Before getting started, yous'll demand to make 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've opened the form builder, add a File Upload field to your grade. You can add together fields to your form past clicking on the field name on the left side of the form architect, 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 u.s. at WPForms. Past default, we only allow uploads of rubber file types (the same ones allowed by WordPress core). These are:

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

Calculation 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 allow users to upload additional file types.

Restricting File Types

To restrict which file extensions you'd similar to allow for a specific form, click on the File Upload field in the form builder. Then, in the Field Options console, yous tin specify the extensions yous'd similar to allow (separated by commas) in the Allowed File Extensions field.

Allowing file types for a File Upload field

This will preclude files with whatever other extensions from beingness 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-divers maximum for your forms, click on the File Upload field in the form builder.

And so, next 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 you'd like to further limit the maximum file size for your forms, you can exercise 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 increment the maximum upload size for your site, y'all'll need to reach out to your hosting provider to find out if information technology'due south possible. For more details, you can check out WPBeginner'southward tutorial on increasing the maximum file upload size in WordPress.

Choosing Between the "Modern" vs. "Archetype" Styles

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

To view these options, you'll demand to open up the course architect and click on the File Upload field in the preview area to see its field options. And then, click on the Advanced tab to testify additional settings.

Accessing the advanced field options for a File Upload field

The advanced options include a Mode dropdown, where you lot tin choose between Modern and Classic.

Choosing between the Modern and Classic File Upload styles

Modern Mode

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

The Modern File Upload style

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

The Modern manner uses AJAX uploading to process file uploads. This is helpful because uploading files, particularly large files, can demand a lot of resources from your site'southward hosting server and ultimately result in a filibuster after your class is submitted.

Withal, AJAX uploading gets a jumpstart on the upload process to let 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 files onto this button or click the button to select files from their devices.

The Classic File Upload style

However, the Classic fashion does not support multiple files to be uploaded to a unmarried File Upload field.

Uploading Multiple Files

In society to permit your users upload multiple files at one time, you lot'll demand to check that your File Upload field is configured to allow this. To do so, click the File Upload field to open its field options.

And so, in the Avant-garde tab, set the Style dropdown to Modern if information technology's non already.

Setting the File Upload field style to Modern

This fashion is required before y'all can allow users to upload more than than ane file to this field.

Return to the General Field Options tab and await for the Max File Number setting. By default, this will be set to one, simply you can increase it equally needed.

Setting the Max File Number

Note: If yous're unsure whether your site'due south hosting environment tin can properly handle the number of files you'd similar to upload, be sure to practice some testing earlier launching your grade. You can also consider reaching out to your site's hosting provider for their communication on uploads.

Including File Upload Links in Notifications

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

If you do so, your e-mail notifications will incorporate links to the uploaded files.

A link to an uploaded file in an email notification

This style you can rapidly 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, within the WPForms folder.

Even so, if y'all'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 selection.

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

No thing where you store your files, you can always access them in the Entries for your form by clicking the file's link within an individual entry.

Viewing a file upload link for an entry

If you'd like, yous can also delete an uploaded file from a specific entry by editing the entry. Just click the ruby trash can icon next to the file'due south link.

Deleting a file upload from an entry

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

Later you've deleted the files you'd like removed from the entry, exist sure to click the Update button to salve your changes.

Saving changes to an entry

Compressing Uploaded Files

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

Frequently Asked Questions

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

I'd like to allow users to upload big files in my form, only it'south non working. What are my options?

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

This will assist with the majority of large upload issues inside a form, merely information technology'southward important to note that the maximum size of a file will nonetheless 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, you lot won't be able to upload a file larger than that.

If you lot'd like to await into adjusting your server's file upload size limits, delight contact your hosting provider. To learn more than, see WPBeginner'southward tutorial on increasing the maximum file upload size in WordPress.

Cloudflare users should note that upload limits are determined by program blazon. The current limits are as follows:

  • Free and Pro: 100 MB
  • Business: 200 MB
  • Enterprise: 500 MB (contact support for customization)

For more than information, please see Cloudflare's upload size limits.

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 tin can prevent files from uploading properly.

For example, you may experience this upshot if your site loads over an insecure (HTTP) connectedness, but site assets such every bit uploaded files load over a secure (HTTPS) connectedness (or vice versa). This will cause a mixed content error, and prevent files from uploading in your forms.

Your site'due south host can easily update your SSL configurations, then be sure to go in bear on with them if y'all run into this error. Y'all may besides want to check out WPBeginner's guide to troubleshooting SSL issues in WordPress.

File attachments tin ofttimes injure email deliverability. For example, if an email provider merely allows a maximum attachment size of 10MB but a user uploads a file larger than 10MB, the email won't exist delivered.

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

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. The most notable examples of this are the Facebook and Instagram browsers.

The proficient news is, we've created a plugin that will prepare this issue for our users. Y'all can download the Escape Facebook/Instagram In-App Browsers plugin by clicking the push button beneath:

Download the Escape Facebook/Instagram In-App Browsers Plugin

In one case you download the plugin, you'll just need to install and actuate information technology on your site.

That's information technology! You now know how to use the File Upload field in WPForms.

Next, desire to learn how to ship different notification emails based on how users fill up out your grade? Check out how to create conditional class notifications in WordPress for a full tutorial.