Hope you are doing well with your WordPress development. Last week, I was suffering from a problem with media uploader. I needed to use the media uploader which restricts users to upload only image files. When users click on  upload image button, the media uploader will open and only image files will be displayed to users. I did much research on web and found only filter to display only image files in the library to the user.

So, finally I decided to find the solution at my own. After doing some brainstorming, the solution clicked in my mind, and it worked!

So, here’s what I did to filter the files with their extensions and restrict all other file extensions from being uploaded to WordPress media from my plugin screen.

Step 1 –

To open the media uploader, first create the following form with input field to store the url of our uploaded file, and a button to trigger the media uploader popup –

Step 2 –

Create a new js file, and store it inside your plugin js folder. Put the following js code into that file, and save it with name “media.js”

Notice the following line in the script –

In this line, we have updated the media object, which sends the data along with the uploaded file to WordPress filter. We need to modify that filter to restrict the files with another extensions than “zip” to be uploaded and give a message to the user that the file he has uploaded is not a valid file. You can change the string "ny-zip-upload"  to anything you want / to the plugin slug.

Step 3 –

Enqueue our media.js only on the plugin admin page. How to do that? check the code below. This will help you to increase performance of your site as well, by loading the scripts and css files only on the plugin’s admin page.

We will have our initial setup ready. When you click on the upload button, you will see the media uploader popup like the following. It has a nice title with custom text on the button and the most wanted feature, you will only see the zip files uploaded to your media library.

zip-uploader

Now, what we are remain to do is – filtering the uploaded files for restricting the file extension. So, read the step 4.

Step 4 –

We now only see the zip files in our media uploader screen, but that’s not all. When you upload a file with any other extension, it will get uploaded, but will not be visible to the user. So, we have to restrict that file from being uploaded from our media uploader screen. To do that, just add the following code to your plugin’s main PHP file / your theme’s functions.php file –

This will filter all uploaded files and will check for the reference, if the uploaded file is coming from our plugin page, that we have set to “ny-zip-upload”, then we will check for its extension, and if not, then we will process the file as it is.

When the user uploads the file with other extension, our media uploader will display the following message to the user –

upload-error

That’s it and we are done. You can use this script wherever you need.

You can download the script from Github Repository.

One thought on “WordPress media uploader with custom file filters and restrictions

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.