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.
- Creating a File Upload Form
- Allowed File Types for Upload
- Maximum File Size for Uploads
- Uploading Multiple Files
- “Modern” vs. “Classic” Style
- Including File Upload Links in Notifications
- Storing Uploaded Files
- Compressing Uploaded Files
- Frequently Asked Questions
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.
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.
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.
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.
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.
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.
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.
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.
The Advanced Options include a Style dropdown, where you can choose between Modern and Classic.
We share details about these style options below.
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.
This style also allows for multiple files to be uploaded to a single File Upload field.
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.
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.
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.
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.
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.
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.
Why do uploaded files show up as links instead of attachments in notification emails?
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:
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.