How to upload files to WordPress — Secure file uploads with Uploadcare
In this tutorial, you learn how to implement the Uploadcare File Uploader in your WordPress websites for users to upload files.
Prerequisites
To follow along with this tutorial, you will need:
- A free Uploadcare account
- A hosted WordPress website with Admin access
Common ways to upload files to WordPress
There are various ways to upload files to your WordPress websites; let’s consider a few.
Native WordPress media library (good for admins, not end-users)
By default, WordPress provides a media library that lets you upload files to your website’s dashboard. This media library and uploader, however, are not available to end users visiting your website; hence, a different solution is needed.
WordPress plugins
There are various WordPress form plugins, such as WPForms and Formidable Forms, that include a file upload feature but come with limitations.
Some of these limitations include not being able to handle large files, not being able to customize the file uploader’s behavior, and not being secure against malicious files uploaded via their upload feature.
Third-party integrations (Uploadcare = scalable + secure)
Using a third-party integration like Uploadcare can enable your end-users to upload files seamlessly on your WordPress websites.
Uploadcare provides a fully customizable File Uploader that can handle large files up to 5TB on your WordPress websites. It scans every uploaded file to ensure it is free of malware and safe to use in your projects.
Uploadcare also lets you customize which file types you accept in your project and how the file uploader behaves.
Why secure file uploads matter in WordPress
When uploading files to your WordPress websites, it is important to consider security for several reasons.
Malware attacks
Malware attacks are common when handling user-submitted files. A malicious user can upload a corrupt file containing malware, and if your file uploader cannot restrict or prevent such uploads, the file can crash your WordPress server.
By default, Uploadcare helps you prevent malware attacks by scanning files for known threats before uploading.
Unauthorized access
When it comes to uploading files, how and where you store them matters a lot, as you could expose your users’ sensitive files if you upload them to a public directory.
For example, uploading sensitive files to your WordPress website to the wp-content folder, and as such, you should use a service that can prevent unauthorized access to your files, like Uploadcare.
Also, it is a good practice to avoid storing user-uploaded files on the same server as your website. Uploadcare servers handle your file management, while your WordPress server focuses on serving your website to users.
Handling large files
When handling large file uploads, various factors can cause them to fail. This includes server limits, network stability, and the implementation of the file upload process.
By default, Uploadcare’s file uploader supports most large-file use cases, allowing you to configure it to upload files up to 5TB.
Compliance requirements (GDPR, HIPAA)
Dealing with user data requires adherence to user policies and compliance with data protection regulations. Failing to meet these requirements when handling user data could result in your company being fined. Uploadcare safeguards personal and business-sensitive information and complies with GDPR, HIPAA, SOC2 and other standards and regulations, keeping your users’ data secure.
Performance and reliability issues without CDN handling
A CDN guarantees that uploaded files are readily available to users when they are needed without fear of slowing down your servers or impacting their performance.
With over 99% uptime and CDN servers spread out around the world, Uploadcare can make sure that your files are fully optimized for delivery and get to you quickly through one of its CDNs when you need them.
How to upload file to WordPress with Uploadcare (Step-by-step)
To start receiving files on a WordPress website with the Uploadcare File Uploader, you first need to add the File Uploader scripts to the head tag of the page. The easiest way to do this is to install a plugin for adding custom head code.
Install a plugin to add custom code
In your WordPress dashboard, navigate to Plugins -> Add Plugin to add a new plugin and search for “WPCode”. Click on the Install Now button to install the WPCode plugin.
WPCode PluginAfter installation, click Activate.
With the plugin activate, you’d see a Code Snippet section on the left navbar of your WordPress dashboard, click on it to open the WPCode page.
Here, you’ll find a button labeled “Add New” which you can select to add custom code to your website.
WPCode “Add New” buttonAdd the file uploader library to your WordPress website
Click on the Add New button, then click on the Add Your Custom Code (New Snippet) and select HTML Snippet as the code snippet you want to add.
On the Custom Snippet page, do the following:
-
Make the snippet name value “Uploadcare file uploader” to easily recognize this snippet when navigating.
-
On the Code tabs section, paste the following code to import the File Uploader and styles:
<script type="module">
import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/file-uploader.min.js';
UC.defineComponents(UC);
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-file-uploader-regular.min.css" />-
On the Insertion section, select Auto Insert as the Insert Method and Site Wide Header as the Location. You can also update these settings if you need the file uploader to be added only on a specific page.
-
Click on the Inactive toggle to make this snippet active and click on the Save Snippet button to save the Snippet.
Create a custom snippet pageNow, head back to your WordPress website, inspect the page using the Chrome DevTool and you’ll see the File Uploader library imported in the head tag of your webpage.
Uploadcare File Uploader library in WP head tagConfiguring the File Uploader
With the File Uploader library imported navigate to WordPress dashboard -> Pages -> All Pages and click on the the Edit button to edit the page you want to implement the file uploader on. This opens the webpage in the visual editor.
Next Type / and select Custom HTML to add the File Uploader element as a block.
Then, add the following code:
<uc-config
ctx-name="my-uploader"
pubkey="demopublickey"
></uc-config>
<uc-file-uploader-regular
ctx-name="my-uploader"
></uc-file-uploader-regular>
Custom HTML code in WP editorDon’t forget to replace demopublickey value with your project’s API Key from your Uploadcare dashboard.
Click the Save button on the top right corner and open the page to view the changes.
You should now have an “Upload files” button on the page.
Clicking the “Upload files” button opens the file uploader modal.
Uploadcare file uploader modalCustomizing the Uploadcare File Uploader in WordPress
Head back to your WordPress dashboard -> Code Snippet and update the “Uploadcare file uploader snippet” with the following:
<style>
uc-file-uploader-regular {
--uc-primary-oklch-dark: 69% 0.1768 258.4;
--uc-primary-oklch-light: 59% 0.22 264;
}
</style>The code above will customize the File Uploader color accent for light and dark mode.
Styling individual components
You can also customize the individual components of the File Uploader by targeting the component’s block name with CSS.
uc-simple-btn button {
width: 500px;
padding: 20px;
background-color: #000;
color: #fff;
}The code above sets the button’s background color to black, sets its width to 500px, and sets the text color to white.
For more details on customizing the File Uploader, check out the styling page.
FAQs about WordPress file uploads
Can I upload files to WordPress without a plugin?
Yes. Admins can upload via the Media Library, and you can accept front-end uploads by embedding Uploadcare’s file uploader directly in pages or forms without installing a traditional WordPress plugin.
How do I secure file uploads in WordPress?
Use an uploader that enforces file type (MIME) validation, size limits, and server-to-server transfers. Uploadcare adds CDN delivery, signed URLs, and access controls to reduce exposure to malware and performance risks.
Does Uploadcare work with WPForms/Gravity Forms?
Yes. You can embed the Uploadcare widget inside forms built with WPForms or Gravity Forms by adding a custom HTML/Field block and passing the file URL returned by Uploadcare to your form submission.
Is Uploadcare free for WordPress users?
Uploadcare offers a free plan and paid plans. You can start integrating the uploader at no cost and upgrade for higher usage limits, advanced security features, and production support.
Uploadcare also offers a free trial to explore all the pro features.
Conclusion
In this tutorial, you’ve successfully integrated Uploadcare File Uploader into your WordPress websites. You also customized the File Uploader to fit your design.
Uploadcare also provides more advanced features, such as image optimizations, image editing and image transformations. To learn more about these features, check out the Uploadcare documentation.