A guide on how to upload files to WordPress

WordPress file upload illustration with screen and folder of files

Looking for the best ways to accept WordPress file uploads? Keep reading to discover the 3 most effective methods for different types of WordPress site.

File uploads are an essential aspect of any website. After all, most websites are essentially a set of pages displaying text and uploaded files.

In WordPress, it's easy to upload files to the Media Library. However, there are several things that aren't so easy:

  • While you can display individual files on the front end of your site, you can't display them to visitors in an easy-to-navigate library.
  • There's no way to allow people who don't have admin access to submit or upload files to your WordPress site.

Many types of WordPress site need to do these things. For example, you may want subscribers and site users to upload their own files to your site. This comes in handy if you accept resumes, guest posts, or screenshots for customer support. Similarly, it makes sense to allow WordPress file uploads on certain ecommerce product pages, combined with dynamic pricing functionalities.

Whatever your WordPress file upload needs may be, this article will cover everything you need to know. I'll show you 3 highly effective methods that work for both you and your site users. Let's dive in!

Method 1: Upload WordPress files in the admin dashboard

For this method, we'll focus on how site administrators can upload files to their site and then display them in a searchable file library on the front end of their site. For this, you'll need to log in to your WordPress dashboard and have at least an 'Author' user role.

Using the default Media Library uploader

It's easy to upload files to the WordPress Media Library. After logging into the WordPress Dashboard, go to Media → Add New. Click Choose File, select the file you want from your local storage, and click Upload.

WordPress Add New Media screen with Choose File and Upload buttons

Use this method to upload one file at a time. To upload multiple files at once, click Switch to the multi-file uploader.

WordPress multi-file uploader drop zone for uploading several files at once

This uploader allows you to simply drag and drop files from your local storage. Alternatively, simply click Select Files.

This lets you upload files to your site. You can then display them individually in WordPress pages and posts using the Image or File blocks. This is pretty limited if you have lots of files, so next I'll tell you how to automate this by displaying you WordPress file uploads in a searchable front end file directory.

Using Document Library Pro to display files in a searchable library

Document Library Pro homepage showing a searchable front end file directory

For the optimum user experience, the best way to upload and display files to WordPress is to use Document Library Pro. This file manager plugin makes it super easy to upload, manage, and display files in minutes.

Document Library Pro displays your uploaded files in a searchable front end media library like this:

Uploaded files shown in a searchable front-end document table with download buttons

People visiting your website can quickly find files using the built-in search box, sortable columns and filter dropdowns. If you prefer, then you can add the document library to a hidden area of your site - for example, if you only want employees to access the files.

As well as being able to easily convert Media Library files into documents, you can upload them in bulk either via drag and drop or the bulk CSV file uploader supported by a drag-and-drop uploader.

Uploading files to WordPress in bulk via the Document Library Pro importer

You can either display them in a searchable download library. Or simply present them within a table. This increases the file library navigation significantly.

Setup instructions

To use this plugin, you need to first get your copy here. After that, you'll receive an email with a downloadable ZIP file and license key.

Next:

  1. Log into your WordPress admin area and go to Plugins → Add New → Upload Plugin.
  2. Select the plugin ZIP file. Click Install Now then Activate Plugin.
  3. Use the setup wizard to apply the basic settings and activate your license key.
  4. Now, go to Documents → Add New and add a new document, including uploading a file for visitors to download.
    Adding a new document with an uploaded file in Document Library Pro
  5. Alternatively, go to Documents → Import and upload files to WordPress in bulk.

Choosing File Upload to attach a file when adding a WordPress document

Next, go to Documents → Settings. This is where you set all the default options for your file libraries. For example, you can choose what information to display about each uploaded file, and much more.

Document Library Pro settings choosing which fields to show for each file

Now find the page on your site called 'Document Library'. Rename this to whatever you like, and then view it. Depending on the options you chose on the settings page, your upload files will appear either in a grid layout:

WordPress audio library grid layout

Or a table layout, complete with checkboxes to download all documents into a zip file:

Document library table with checkboxes to download selected files as a zip

Method 2: Upload files to WordPress from the front end

So far, we've learned how administrators can upload and display files in WordPress. But what if you want visitors to be able to upload files themselves?

Wondering how to create a file upload form in WordPress without a plugin? To be honest, you probably don't want to. Without a plugin, you'll need to write a lot of PHP code, or hire a WordPress developer just to accept WordPress file uploads. That will take more time and money than the cost of a plugin, while also bringing worse results.

There are two excellent plugins to consider, depending on your needs.

Let users upload files to WordPress without displaying them on the front end

You can do this with a form builder plugin like Gravity Forms. The plugin makes it very easy to accept file submissions through your site forms. This is ideal for job boards, membership sites (profile photo upload), eLearning platforms, and online competitions.

All you have to do is get the plugin. Once you've set it up, go to Forms → New Form. In the editor, click Add Fields → Advanced Fields in the right menu. Then drag and drop the File Upload field into the form.

Dragging a File Upload field into a form to collect WordPress uploads

Let users upload files to WordPress and display them on your website

To do this, I highly recommend accepting file submissions with Document Library Pro. That's because as well as the back end file upload options we discussed earlier, it also allows your users to upload files before displaying them in the document library.

All you need to do is insert a 'Submit file' form anywhere on your website. To add the form, simply create a page and add the shortcode: [dlp_submission_form]

The form will contain all the fields which are enabled for your documents, such as the title, excerpt, author, and so on.

Finally, let's talk about ecommerce. I'll walk you through how to allow users to upload files when placing orders in a WooCommerce store.

Method 3: Allow users to upload WordPress files when ordering products online

WooCommerce Product Options homepage showing add-ons and a file upload field

WooCommerce Product Options is the best WordPress file upload plugin for ecommerce. The tool allows your customers upload almost any type of file, such as an image upload on the product page. This answers the question: "How do I upload only certain types of files to WordPress?" It is also beginner-friendly and in just a few clicks, you can enable submissions of certain file types in WooCommerce.

Product Options lets you to set a maximum file size and decide whether the upload field is required or not. Additionally, you can combine the file upload fields with several other extra product options. And there are lots more features to explore.

How to add file uploads to WooCommerce

Once customers have uploaded a file, you can display a preview of their image on the finished product:

Uploaded file previewed on a hoodie after a WordPress file upload on the product page

After you've installed and activated the plugin, go to Products → Product Options → Add Group.

Creating a new option group from the Product Options screen via Add Group

On the next page, set the group name and select the products or product categories you want the product options to apply to. Then click Add option.

Setting an option group to target specific products before clicking Add option

Add an options name and select File upload under the Type section.

Selecting the File upload option type in WooCommerce Product Options

Next, scroll down to edit the file upload field settings. For example, the Label appears beside the WordPress file upload field on the store's front end.

You can also charge an extra fee for uploading a file to WordPress. This can be a fixed fee, a percentage increase or decrease, or you can charge by the number of files uploaded.

Setting a fee for a file upload using the price type dropdown

Pay attention to the Required box. Check this box to make the field required to be able to add the product to the cart.

Once you're satisfied with your selections, click Save.

Now when you go to the WooCommerce single product page, you'll see your newly added file upload fields.

New front and back file upload fields shown on the WooCommerce product page

Enable live previews

If you bought WooCommerce Product Options with the Live Preview add-on, then live previews are automatically enabled for each file upload field. This means that you just need to set a printable area for each image.

To create printable areas for file upload fields:

  1. Go to the WordPress Media Library.
  2. Open a product or variation image.
  3. Click 'Set printable areas'.
  4. Add one or more printable areas, and choose the other options as needed.

For example, this product image of a backpack has 2 printable areas. One is a custom shape on the front of the bag, and the other is a rectangle on the front pocket.

Set custom printable area in WooCommerce product

View the file upload field in your ecommerce store

Now when a shopper uploads files on a product page, they'll see the files in their cart and during checkout.

After clicking Add to cart, the shopper will see a link to the uploaded file in their cart. They can click the link to review the file in a different tab.

WooCommerce cart showing a link to the customer uploaded design file

The link is also available on the checkout page and in their order confirmation email notification.

WooCommerce checkout order summary showing a link to the uploaded design file

As the store owner, you can also find the file link on the individual order page by going to WooCommerce → Orders.

WooCommerce order detail showing a link to the customer uploaded file

This makes it very easy to manage file uploads on your WooCommerce product pages and deliver the buyer's exact order.

Do more with WordPress file uploads

Uploading files to WordPress is a straightforward process. Whether you are uploading images, videos, or audio files, WordPress has got you covered. In this tutorial, we've shared some powerful tips for WordPress file uploads. With these tips, you can take full advantage of the media library and enhance the visual appeal of your website.

Of all the available upload methods, we discussed the easiest and most efficient:

  • Upload files in the WordPress admin areaThis is the most common way to add files to WordPress. You can either use the Media Library, an FTP client, or the Document Library Pro plugin which comes with drag and drop file upload, plus CSV bulk import.
  • Let users upload files to WordPress from the front endAgain, you can do this using Document Library Pro's front end file upload form, and then optionally display the uploaded files on your website.
  • Accept file uploads on WooCommerce product pagesFinally, you can enhance your ecommerce products with file upload fields. WooCommerce Product Options is the best tool for achieving this.

Ready to add WordPress file uploads to your website? Then get your copy of Document Library Pro today.

We hope this detailed step-by-step guide has helped you to upload files to WordPress. Did you face any issues along the way? Kindly let us know in the comments section below!

Further reading: How to add file uploads to WooCommerce products