Redactor Image Uploads For WordPress

For the past few weeks, I’ve been working on a web application that’s being built on top of WordPress.

One of the requirements dictated the users should be able to have rich editing from the front end after being logged in. This includes being able to do the usual bold, italic, strikes, and link, as well as images and videos.

Redactor.js is a fantastic jQuery plugin that brings front-end editing to any website or web application, but implementing Redactor JS image upload and WordPress proved to be a bit of a challenge specifically because I wanted to keep all images organized in the standard wp-content/uploads directory.

So, while working on said project, I also generalized the script a bit and created Redactor Image Upload For WordPress.

It’s a short, simple title, right? Right-ish.

Redactor Image Upload For WordPress

Redactor Image Upload For WordPress

Generally speaking, the script is a single file that you drop into your WordPress theme and then reference in the Redactor.js initialization code. From there, the script will do the following things:

  • Attempt to upload the script into the uploads/YEAR/MONTH directory
  • If the year and/or month directories don’t exist, it will create them based on the current date
  • Check to see if a file with the same name exists
  • If so, increment a suffix on the filename and then copy it over
  • Officially return the Image URL to the browser

Note that this project is not a WordPress plugin, but is is a script that’s intended to be used with Redactor and with WordPress. There’s more documentation on the GitHub project page.

Looking For Contributors

Redactor.js is a plugin that I highly recommend – I know a number of developers who are constantly looking for ways to implement front end editing and this has been my favorite solution.

That said, this script isn’t perfect (hence version 0.1) so if you’re currently using Redactor and notice any bugs or issues or have a feature request for this script, please do a pull request or open an issue.

I’m far more concerned with having a solid library available for the WordPress community at large than I am having a single script that works for a few one-off projects of my own.

9 Comments

Looking good, Tom! I must say I am impressed by the way you carried it out. If I had to it myself, I’d probably have chosen to go with the built-in TinyMCE (I’d *try* to use wp_editor()).

I got a couple of ideas about this script I thought to share with you.

In regards to the way you chose to handle uploads, my personal preference would be not to use a PHP script in the theme directory to handle and process the upload, but rather to leverage the AJAX API for doing exactly that. That said, I know this is my very own personal opinion, but I don’t feel much comfortable referencing to scripts that reside within the theme directory, directly from the code. Also, I think you should consider verifying user intention. By skimming through the script, I can see that it doesn’t stop anyone from uploading files. That means that anyone with a malicious intention can POST files to that URL and then they will even get the full URL path to the uploaded file. The AJAX API can be especially useful in this case since you can use nonces to verify if the upload comes from the front end of your app. This is not foolproof but better than nothing.
In regards to the folders structure that you utilize – this might be exactly the way you want it for that specific project, but for others it might not be the case. What I want to note is, that the upload folder path and structure is not permanent. If you go to Settings → Media, you’ll notice that you can change the folder structure and also decide whether you want the folders to be organized by a year/month structure. You can even go one step further and completely change the default path for file uploads. For instance, you can set the uploads directory to /wp-content/_custom_uploads_, while the default is /wp-content/uploads. Note that I am not saying you should have done it this way, I’m just mentioning that there’s another side to the coin. Obviously anyone is free to take that code and adapt it to their specific needs.

Anyways, kudos for sharing that! Redactor seems pretty popular and I am sure it will be useful for people out there seeking to integrate it with WordPress!

    You know that one of “those guys” who tries hard not to deviate too from from the native WordPress API, but the requirements of this project required something a little bit different and Redactor fit the bill. Truth is, for front end editing, I may even consider reusing it in future projects because integrating it, extended it, and managing it on the server-side was that much easier.

    Anyway, you bring up completely valid points (which I always appreciate – dig learning from other developers). The way that redactor is setup, it uses Ajax to contact to the script located in the directory. Now, a malicious user could technically reverse engineer the location of the script if they brute forced it enough (or, you know, read the source of what I shared on GitHub :), but I’d be significantly more worried if I were handling file types other than images (hence the function for checking those file types).

    Finally, yeah – the folder structure isn’t something I dig. I versioned the code 0.1 rather than 1.0 because I already knew it wouldn’t work from within a WordPress installation in, say, a subdirectory. It expects to be in the root of public_html. Your point is spot on, as well. Luckily, that can be read via the API and handled appropriately. I may update the Known Issues on GitHub for just to let others know I’m aware, and in case someone else can patch ‘em before me ;).

    Again, killer comment – dig your ideas on approaching it, and will be updating GitHub with known issues next week.

Thanks! I’ve been looking for a solution for weeks! The Redactor.js is looking awesome, I just wish WordPress was more modular and TinyMCE was not that tightly integrated into it.

    Sure thing!

    I think TinyMCE is okay – I have my complaints (who doesn’t?), but overall I dig it. As far as integrating it into a separate application or using it as a third-party editor, I’m someone that tries hard not to deviate from the native WordPress API, but I found Redactor to be really nice, really easy to use, and really easy to manage on the server-side.

Tom, have you thought about using WordPress nonces to prevent unwanted uploads?

    Yep – I have! In the context of the project, the code got a bit more involved that what you see here, but I’ve not had time to come back and revisit it.

    That’s why I ended up putting this up on GitHub – just to get a little collaboration ;).

Whoa, awesome script! Media handling of any kind is not something I understand at all, so this definitely helps.

I built a metabox class which supports deep-nested, grouped fields which can be dynamically expanded (both the field and/or the group and fields in them). I was having a miserable time trying to get TinyMCE to be dynamically created, copied, moved around etc so I ended up going Redactor.

I’ll add a pull request with the nonce sometime this weekend as I’d like to add this to the class which I use with all my clients. Thanks again Tom!

Trackbacks and Pingbacks

[...] Tom McFarlin ArticlesNotesTipsResourcesProjectsSpeakingAboutContact Home/Projects/Redactor Image Uploads For WordPress [...]

Leave a Reply

Name and email address are required. Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>