Years ago, I wrote about how to upload files in WordPress from the administrative area. This post is practically an update to that mail service, simply it covers new considerations that I make and another processes that I think are necessary.

For this mail, I'yard going to work off the instance of uploading a PDF file and how also to make information technology available in the Media Library.

In doing and so, I'grand also planning to embrace some considerations that should exist made on the client-side and the server-side every bit well as things for which to expect for whenever someone is transferring information across the wire.

Uploading Files in WordPress (And to the Media Library)

Before getting to the gist of this postal service, I'm assuming y'all have:

  1. A submenu page or admin folio setup with a file input,
  2. That you lot're properly set up to take MIME types,
  3. That you're comfy with a petty JavaScript,
  4. And you lot're comfortable working with custom messages outside the standard WordPress API.

If and so, all of the code should be relatively self-explanatory (not that I won't intermission it down piece-past-slice), only if any of the in a higher place sounds disruptive, and so the mail may include some textile that requires a piffling more than research in the Codex or regarding JavaScript that I'll provide hither.

Regardless, I'll practice what I can do exist as comprehensive as possible.

one. The Principal Thought

The idea of the characteristic is simple: You want to requite the user the ability to upload PDF files via the WordPress assistants surface area. You also want the file to be bachelor in the Media Library.

The ability to do this isn't difficult, simply at that place are means to enhance the user'due south feel that I'd like to cover in this postal service, too (like not beingness able to upload anything until the file has specified in the input box, for example).

ii. The UI For Verifying The File Type

First, as I said at the superlative of the mail service, I'm assuming that you have the groundwork laid for the assistants folio in WordPress. This tin can be done in some ways – I've opted to employ a submenu page, simply there are some means this tin can be washed.

Secondly, the folio is simple: Information technology includes the folio title, a file input field, and an 'Upload' button that'south disabled past default:

Observe that when I try to add together an prototype that's not a PDF, I'thou given an error bulletin, and the 'Upload' button is still disabled:

But when I add a file that's of the expected type, the 'Upload' push is enabled:

This requires a few things:

  • JavaScript that sniffs out the file blazon,
  • Partials with visibility that tin can be dynamically toggled via JavaScript,
  • And the ability to enable or disable a file input button.

An important note is that on the client side: Nosotros can only assume the file is the proper file type based on its extension. We'll have to practice more work on the server-side to ensure this is accurate.

Merely the point of checking on the customer-side to make sure we give the all-time experience possible through notification messages and enabling or disabling options based on the type of file.

3. Verifying the File Blazon on the Client-Side

Assume for this example we take a partial that renders whenever we attempt to upload a file that isn't a PDF. By default, the container has a style="brandish:none;" attribute which we'll manipulate via JavaScript shortly:

Notice that this partial has an ID of invalid-file-message. This is a flake generalized as you may want to prefix it with something else, simply for purposes of this post, yous get the idea.

To toggle the visibility of this bulletin, y'all take to setup a handler in JavaScript to monitor the alter in the file input chemical element.

4. Monitoring The File Input Element

At this point, there needs to be a JavaScript file that monitors the value of the file input element's change issue and then it can decide what class of action to take.

Have a look at this code:

This code will look for the value of the input field. If the file blazon doesn't match pdf, and then it will toggle the visibility of the fault message above; otherwise, it will display the upload push button.

And remember, it's good practice the enqueue this script just in the administration area and on the page it's required:

All of this will make sure your plugin properly registers the script on the page on which it'southward needed, nowhere else, and that information technology properly checks to make sure that file being specified is of the right type.

But There's More than

Originally, this was going to be all one post, merely the amount of content to require it all would have too much time to sift through (at least, in my opinion). So I'm trying to go far a little easier to follow past breaking it up into a couple of posts.

As mentioned previously, at that place's only so much nosotros can practise on the client-side. Certain, there are steps weUplo tin take to assist meliorate the user feel, simply it's not the nearly secure, and there is more than work to be done on the server-side.

In the 2d half of this serial, I'll look at the PHP required to manage the uploading of files and securely doing so.