Monday By Noon

Announcing Front End Upload, a New WordPress Plugin

Note: Front End Upload Pro is now available. It includes many of the features you’ve been asking for, check it out!

Over the past month or so I’ve been working on one of the plugins I’ve had in the works for a bit. This one makes integrating a front end upload system with your WordPress theme a piece of cake. Development will continue to be active, but I’d love to get some initial feedback.

The premise

Allowing client uploads has for a long time been a troublesome problem. With the advent of things like SWFUpload back in the day, things got better, but the variance among server configurations and connection speeds proved to be problematic more often than not.

Also: it needed Flash.

Luckily those days are very much in the past. While client-facing large file upload systems have been in place for a while, implementations haven’t quite trickled down to being labeled “easy”, until today.

I wanted to build a WordPress plugin that facilitated adding a client upload form to your site with the least friction possible, something you could literally activate, implement with a shortcode, and leave it at that if you wanted. Enter Front End Upload.

Under the hood

I’ve been keeping my eye on Plupload for a while now. Plupload is built by Moxiecode, the company most famously responsible for TinyMCE. Moxiecode defines Plupload as:

.. a highly usable upload handler for your Content Management Systems or similar. Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation.

It’s just that. Plupload system is elegant, takes advantage of the HTML5 goodness we like to see, and does things really well. WordPress core considered it for a long time before integrating it into version 3.3, so going with Plupload was an easy decision. I just had to figure out how it should work.

I wanted to have the plugin be shortcode based, if for nothing more than to lower the barrier to entry. Shortcodes are easy for novice WordPress developers to pick up, and advanced developers know all about do_shortcode() so that’s what I went with for the first version.

Once the shortcode was implemented, Plupload really took over. I was immediately impressed with how seamless everything worked. The thing I was most impressed with though, is the chunking that’s been implemented. During my testing I was able to upload a 1GB file to a shared host. That is an impressive feat to me.

Customization

The default implementation is far from glamorous, but that’s by design. My intention when writing plugins is to provide the baseline, the most basic implementation I can come up with as to prevent and customization hurdles.

Screenshot of Front End Upload

The default skin for Plupload is used, and no styling is provided for the form. CSS classes are provided for easy customization and hopefully you can get up and running really quickly. The settings are also quite straightforward, with the goal of facilitating a customization of the implementation, not having to deal with any technical details:

Settings screen for Front End Upload

You’re able to set a passcode, which when enabled will require the visitor to correctly enter it prior to gaining access to the upload form itself. You can put a limit on filesize, enable additional custom file extensions, customize the email that’s sent upon upload completion, and also provide your own markup for the success message.

Check it out, let me know what you think

Front End Upload is now available in the WordPress plugin repository, and I’ve love to hear your initial thoughts. I’d also like to hear what you think it’s missing. The plugin is brand new and I’m still coming up with a roadmap, but feature requests are more than welcome, I’d love to make the plugin more adaptable and useful for people.

A few things I’d love to take care of sooner than later:

  • Customize the fields used in the form
  • Add more available tags for the email template (e.g. submitter IP)
  • Provide a way to customize the skin of Plupload

I can’t express enough how much of the heavy lifting Plupload is doing, this plugin is only a wrapper. I hope it accomplishes it’s goal though, and I’m really looking forward to some feedback now that it’s in the wild.

There's a conversation brewing

  1. michael soriano January 2, 2012 at 5:26 pm

    good work Jonathan. Tried and tested locally – it works!

  2. saxon January 2, 2012 at 7:41 pm

    these to statements in the readme may mean something to a lot of people.. it means nothing to me.
    1. Place `[front-end-upload]` in the editor where you would like the uploader to appear
    1. Customize your CSS

    which files?

  3. Bertrand January 3, 2012 at 9:06 am

    Great plugin, but how translate in french the uploader ? Thanks !

  4. Benjamin Allison January 3, 2012 at 9:22 am

    Awesome! I wonder if this would also be good replacement for WP’s backend uploading!

  5. Kjell January 3, 2012 at 5:59 pm

    Hi Jonathan,

    I’ve activated your plugin on my site, but this is the message I receive when browsing to the “offerte” page that contains the upload form :

    You browser does not have Flash, Silverlight, Gears, BrowserPlus or HTML5 support; upload is not available.

    I’m using FireFox 9 ? Any idea what’s causing this ?

    • Jonathan Christopher January 5, 2012 at 2:18 pm

      There is likely a JavaScript error on the page, aside from the plugin. Check out Firebug or Web Inspector to see if there is a JavaScript error.

    • Kjell January 5, 2012 at 6:01 pm

      Yes, when I activate FireBug then I get a “jquery not defined” error… but only when I activate the plugin. When I disactivate the plugin there are no errors on the page.

      Jquery is included at the bottom of the page and the url to the script is correct.

      It’s included using functions.php , this is the jquery include function :

      if(!is_admin()){

      wp_deregister_script( ‘jquery’ );
      wp_register_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’, false, ’1.7′, true);
      wp_enqueue_script( ‘jquery’ );

      If I load jquery in the head, would that make a difference ?

      Sorry for being a dummy :-)

    • Kjell January 7, 2012 at 5:31 pm

      well, me again… still no luck to get this running…

      I’m using a responsive theme called Reaction bought on themeforest.net , i’ve already contacted the designer. According to him there is no jquery error inside the theme.

      The error only appear when activating the Front upload plugin.

      This is the error I get.

      jQuery(this).pluploadQueue is not a function

      you can see the page running this plugin here : http://www.ibiz.be/offerte

    • Jens February 27, 2012 at 7:10 am

      Hi,
      I am getting the exact same message, and I am also using a responsive theme, called Respo. Don’t know, maybe there is an issues with responsive themes and the Front Uploader?
      Thanx,
      Jens

  6. Nick January 5, 2012 at 4:30 am

    Hey, nice work with the plugin – I’ve spent all day looking for something like this! I’m wanting to receive some pretty large files at times, so am looking at using cloud storage. How hard would it be to implement a way to upload to a different location?

    Cheers,
    Nick.

  7. Niall O'Brien January 7, 2012 at 10:55 am

    Nice, we could be even closer to making full web applications by using this plugin, members area plugin and a custom theme all with WordPress. Very interesting!

  8. Alan January 7, 2012 at 11:31 am

    It would be great if we could also add in a Dropbox API and have the files upload to a folder in Dropbox.

  9. Bryan January 7, 2012 at 2:50 pm

    This worked great for me on the install. And I managed to set up the form. However, I uploaded a file, got a success, and now can’t find the file. It’s not in the uploads folder. Anything I might be doing wrong?

    • Jonathan Christopher January 7, 2012 at 4:44 pm

      The uploads are stored in a file called iti_feu_uploads that’s in your wp-content/uploads folder, does that help you locate it?

    • Andy Hawkins February 5, 2012 at 10:33 pm

      Hi Jonathon, installed and activated the plugin today and it worked a treat. Initially I ran into the same problem of not knowing where the files went but the confirmation email gave me the path. My issue now may not be one you can help me with but it seems a natural next step so I figured it wouldn’t hurt to ask but I’m at a loss as to how to get the files to automatically appear in a gallery. Any suggestions?

  10. Adam January 9, 2012 at 1:26 pm

    Very cool. Haven’t tested yet, but can’t wait! Is there a way to change the directory where files are uploaded? I’d prefer not to sort through the Media Library for the uploaded files. Thanks!

  11. Rudy Chou January 10, 2012 at 12:53 am

    Very cool plugin. I haven’t had a chance to try it as I’ve halted most of my WordPress development focused more on other things. But I’ve bookmarked this page and will definitely use it in an upcoming project.

    Thanks.

  12. Fred January 10, 2012 at 7:38 pm

    Works and solved a problem that we have been looking starting some coding. Any way to rotate images as part of the upload?

  13. Andrew Taylor January 11, 2012 at 7:08 am

    Great plugin. We’re trying to use it to send large mp3s which works well in Firefox and IE, but the mp3 attachments don’t seem to attach properly in Safari (Win & OS). The file seems to upload (although faster than normal) but it doesn’t go to the upload folder and the attachment link is malformed in the email e.g.

    /wp-content/uploads/iti_feu_uploads/{

    .jpgs, docs etc are all fine in Safari.

    Any ideas?

  14. Corey C January 14, 2012 at 10:43 am

    Is there a setting were the original file names can be kept, for example if someone uploads a file named poster.jpeg, it doesn’t change to p16jede3f0gd1v8p11rgvc019ou5.jpeg once uploaded?

    Thanks for your help!

  15. Adriano January 16, 2012 at 7:07 am

    Hi, great plugin! but I have the same trouble as Bryan, got a success, but not charge any file on iti_feu_uploads, also file list on e-mail message is empty.
    Just an istant before redirect to “file received page” I see a warning yellow triangle on state column.
    Regards.

  16. Christian Jung January 19, 2012 at 6:08 am

    Hi, we’re running into problems with your plugin on a multisite-installation. The plugins.php of the blog, where the plugin was activated, blacks out with a Error 500. Any ideas, if this can be solved? Thanks very much.

  17. Nick January 19, 2012 at 10:58 am

    Hello,
    This is a genuinely useful plug-in. I’m keen to deploy something like this to facilitate ‘client’ uploads, but am wondering whether it might be able to be customised so that it can upload directly to a CDN (ie Amazon s3 in my case), so as not to burden the bandwidth of my webserver. Might this be in the pipeline…?

    Also: I would definitely agree that it would be useful if uploaded files retain their name and are not changed by the upload process. Otherwise it would be very difficult to keep a track of client files…

    Hope the feedback helps and very best of luck with the development. I think it fills a real gap in the wordpress user market…!!!
    Nick

    • Jonathan Christopher January 20, 2012 at 8:01 am

      Thank you for the note, a few people have requested S3 support so that’s definitely on my list but as you can imagine will take some time and lots of testing. This page will be updated as things progress.

  18. Josh Reynolds January 22, 2012 at 10:38 pm

    Hey sorry to bother, I love this plugin!! alot its perfect I run a digital record label the only thing is I would like to remove the message and email field is this possible ?

  19. Chris January 23, 2012 at 12:14 pm

    Hey Jonathan! This plugin looks real promising. I am currently at work but I have a longer comment for you later.

    I remember your Crop script where a user could upload and crop and save their image. I have been wanting a plugin that allows a user of my website to upload their own photo and for it to auto post into my website. But the user also has the option of uploading a bigger photo and cropping it to the correct size I restrict.

    It is for a Wallpaper website. Defiantly going to have a play with this plugin :)

  20. Marie January 26, 2012 at 1:27 pm

    Hello! I’m trying to use your pluggin but I have this error right after “Submission Passcode” on the admin options panel : Warning: call_user_func(FrontEndUpload::edit_passcode) [function.call-user-func]: First argument is expected to be a valid callback in C:\htdocs\website_folder\wp-admin\includes\template.php on line 1138. Maybe it has to do with the functions of the template I am using, anyone has an idea?

    Thanks!

  21. Chris January 26, 2012 at 4:32 pm

    Thanks for this plugin I like the simplicity. I just tried it and it worked as well.

    My main wish would be to be able to designate a specific destination for uploads, such as a client folder.

    In my case, a cliemt makes a purchase (Paypal button). Somehow their last name or a transaction number is transferred or saved to the plugin so when they upload it goes into their folder.

    There are probably all kinds of different systems in place to do this but I’m just starting out, so I like simple plugins.

    Thanks though, this one is a good start for me.

  22. Kitty Jellinek February 2, 2012 at 11:04 pm

    Hi Jonathan,
    This is a great plugin – installed and works like a charm.
    Only problem I am having is setting it up so that the user who has loaded up the files can choose to have the media appear on their own page only.

    Currently when a user loads up the files within their own portal in a membership site:
    1] Everyone can view the files list generated by the [ffm-uploader], on their portals.
    I have tried this:
    ———————-
    set( ‘author’, $current_user->id );
    }
    }
    }

    add_filter(‘parse_query’, ‘mymo_parse_query_useronly’ );
    ?>
    —————-
    But it doesn’t work.
    Would you know of a work around? I am in a desperate hurry and have come to my wits end. I am prepared to pay you if you can come up with a solution.

    All I am trying to do is have a facility where users can upload files to their own portal pages, which are secured with the s2member plugin on a normal wp install.
    Really hope you can help.
    Cheers,
    Kitty.

    • Jonathan Christopher February 4, 2012 at 11:06 am

      The files uploaded aren’t tied into the WordPress Media library so that’s likely why you’re running into issues. I’ll keep this use case in mind for future development considerations though!

  23. Kitty Jellinek February 2, 2012 at 11:06 pm

    Sorry the code in the previous message didn’t publish correctly.

  24. Jeremy February 3, 2012 at 6:00 am

    Thanks a ton! I have been hunting for a simple, effective and robust plugin that would allow my clients to upload large file for awhile and nothing seemed to work for me.

    I love the fact that my clients will be able to see the upload ‘progress’ so that they don’t need to sit and wonder if it is working and why it might be taking so long… BRAVO!

    I wish I knew more about CSS… and I plan on learning but as of now I have no way to integrate the plugin’s design into the look of my site. My only suggestion for the future would be the ability to alter color, font, placement etc of the fields and buttons.

    Thanks again & great work!

  25. La Nor February 7, 2012 at 3:00 am

    I’m also getting the “You browser does not have Flash, Silverlight, Gears, BrowserPlus or…” error, but only when im trying to open it inside a fancybox. Any suggestion on how to fix it?

    • Jonathan Christopher February 7, 2012 at 8:04 am

      There’s a JavaScript error on the page likely caused by the theme or another plugin, have a look at your console to see where the error is.

    • Jens Törnell February 14, 2012 at 12:38 pm

      I have the same issue as many others. “You browser does not have Flash, Silverlight, Gears, BrowserPlus”…

      I deactivated ALL my plugins, except from this one. The only jQuery running are the ones added by this plugin.

      I created the theme myself and it’s just some simple loops. wp_head and wp_footer are there as well. Still no luck.

    • Jens Törnell February 14, 2012 at 12:49 pm

      I can add that i use Google Chrome 16 and there where no errors in the developer console. The same issus appear in Firefox as well and it is not a browser problem.

      My guesses
      - Javascript can’t find the right element?
      - wpnonce is not validating correct?
      - Something else…

  26. Oliver Needham February 15, 2012 at 3:35 pm

    I’ve installed your plugin and it’s great!
    It will be an awesome way to transfer files between clients.

    However I was wondering how I could change the way files are names when uploaded? Of course we want to ensure that files aren’t overwritten, so I wouldn’t object to adding a random number or short timestamp on the end, but would it be possible to keep the original file name intact?

    Maybe also be able to specify a folder to upload files to?

    But great work on the whole thing!

  27. DavidK February 22, 2012 at 3:18 pm

    Hi –
    I’m building a private WPMS environment to teach photography. I’d like to be able to use your plugin. It’s installed, but it will not accept any changes in the Options page … I enter say a file extension, hit save and it vanishes.

    I’ve posted the short code [front-end-upload] — and get nothing except for the actual text: [front-end-upload] …

    There’s a lot of plugins running, but most are critical to the security and control required for this Ap.

    Any suggestions??

    • Jonathan Christopher February 22, 2012 at 3:52 pm

      I would guess that there is a plugin conflict somewhere along the line, Front End Upload really isn’t doing much under the hood so I might suggest de-activating plugins to find out which one is the conflict and going from there.

  28. DavidK February 22, 2012 at 5:02 pm

    Hmmmm…. thanks.

  29. Johnny B February 26, 2012 at 5:59 am

    HI Jonathan, I have to agree with others on here that have said what an excellent plugin. Can I be so bold as to suggest an enhancement that others have also made a comment on. I think it would be really good if the plugin gave you the option for the user to upload to their own directory. Eg in to ‘the path/user_login/
    This way each user or customer could upload their own files / images and they will not be confused with other customers files / images.
    Maybe this could be set as an option in the settings page.

    Many thanks,

    Johnny B

  30. Ryk February 26, 2012 at 10:27 am

    That’s a really great plugin and it works great for uploading. But I have really weird problem:

    I want to use it for our podcast and let all partners upload their audio-file. So after download, I have to delete that big files. But I can’t delete any files or the folder anymore. If I change the permissions they switch back immediately. What can I do now? Please help!

  31. Canon February 28, 2012 at 3:04 am

    How can i set the files count limit from this plugin instead of adding max_file_count manually in the javascript file?

  32. Jonathan Christopher February 28, 2012 at 6:50 am

    Hello everyone, I appreciate all the feedback and am getting repeated requests for the same feature set. Please know that these things are on my list but I don’t have a timeline for completion quite yet. I am going to close the comment thread for now, to prevent an expanding thread requesting similar features. Thanks!

Comments are closed.

Powered by Fusion

This article is so meta

Published January 2nd, 2012

Random article

Loading...

My new ebook: Client Oriented WordPress Development is on sale now!