Wednesday, February 10th, 2010

Plupload: A rich upload experience on pluggable backends

Category: Component, JavaScript

<p>The Moxiecode folks (TinyMCE fame) have released a generic component Plupload that allows you to create a rich upload experience on the back of a variety of transports. Whether it be HTML5, Gears, Silverlight, Flash, BrowserPlus or normal forms, you can get an upload experience with drag and drop, progress, client side image resizing and chunking.

Various backends support different feature sets:

pluploadbackends

You can use a core API like this…

javascript
< view plain text >
  1. var uploader = new plupload.Uploader({
  2.     runtimes : 'gears,html5,flash,silverlight,browserplus',
  3.     browse_button : 'pickfiles',
  4.     max_file_size : '10mb',
  5.     resize : {width : 320, height : 240, quality : 90},
  6.     url : 'upload.php',
  7.     flash_swf_url : '/plupload/js/plupload.flash.swf',
  8.     silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
  9.     filters : [
  10.         {title : "Image files", extensions : "jpg,gif,png"},
  11.         {title : "Zip files", extensions : "zip"}
  12.     ]
  13. });

… and a jQuery Queue Widget.

plupload

Related Content:

  • Rich Mogull
    Rich Mogull has 20 years of experience in information security, physical security, and risk...
  • Rich Young
    Rich Young has 14 years of technology marketing and communications experience. He has consulted on behalf of the technology industry's largest...
  • Rich Young
    Rich Young has 14 years of technology marketing and communications experience. He has consulted on behalf of the technology industry's largest...
  • Rich mobile applications can boost productivity, user experience
    Rich mobile applications have the potential to change how users interface with enterprises'...
  • Rich Mogull
    Securosis Founder & Analyst Rich Mogull is a contributor to...

Posted by Dion Almaer at 6:18 am
14 Comments

++++-
4.1 rating from 85 votes

14 Comments »

Comments feed TrackBack URI

Would have been great if it actually worked to!

“TypeError: Error #1006: dispatchEvent is not a function.
at Function/()

Gotta love flash. :)

Comment by V1 — February 10, 2010

Although very nice work this is still not that ideal due to browser support. Drag-n-Drop is only really possible on all browser via either Java or with the Yahoo BrowserPlug plugin.

I’m waiting for the day that we can remove out Java applet in favor of something better.

Comment by Phunky — February 10, 2010

@V1: Never seen that problem before. Works for me in all browsers, could be a faulty Flash installation on your machine. Also only IE needs your to use Flash FF, Chrome and Safari can use native support or Gears.

@Phunky: Hopefully all modern browsers will have good file upload support soon. They are slowly getting there and FF is on top right now but it’s still not perfect. Drag drop is also possible using Gears on all browsers but since Google dropped development on it will probably not be that wide spread.

Comment by Spocke — February 10, 2010

Appears there’s no multipart request upload support :-(

Comment by RoryH — February 10, 2010

@Spocke I’m using debug builds of the Flash Player. Version stats: MAC 10,1,50,416 according to: http://kb2.adobe.com/cps/155/tn_15507.html

Hopes this helps :)

Comment by V1 — February 10, 2010

@RoryH: We will probably add optional support for multipart in the future. Why we didn’t do it in this initial release is the impossibility do to so on WebKit and still use the upload progress etc. Check this issue for a more detailed discussion: http://github.com/moxiecode/plupload/issues#issue/1

@V1: Thanks. It would be very helpful if you could file a bug report at GitHub with details about browser, operating system etc. So I can try to setup an environment that matches yours so I can try to reproduce it.

Comment by Spocke — February 10, 2010

@Spocke This looks great – thanks for sharing!
FYI: the example code for the jQuery plugin will not work with jQuery 1.4, because of the $().ready(function(){}) call. This is one of the breaking changes in jQuery 1.4. It should work fine if you change it to $(function() {}).

Comment by bgrins — February 10, 2010

@bgrins: It works just fine with jQuery 1.4. They removed the document from the default collection so it will effect thinks like bind. But they made sure that ready works as expected for compatibility. I also verified that the current version works with jQuery 1.4.1. But your method is shorter so I might just change it to that later on.

Comment by Spocke — February 10, 2010

Am I the only one that clicked the big grey upload icon before the smaller green one?

Comment by Darkimmortal — February 10, 2010

We will fix a better more clear upload button for the next release. It’s way to easy to miss the upload button now.

Comment by Spocke — February 10, 2010

Client side image resizing before upload : I’ve tried it a month ago using Andreas Ritter JPEG Encoder JS Lib + Canvas + FileApi (on FF 3.6 beta) : http://cedric.bazureau.free.fr/proofofconcept/

Comment by CedBaz — February 11, 2010

@Spocke Why did you release it under the restrictive GPLv2 license and not under a more liberal license like LGPL, BSD or MIT?

Comment by mikedeboer — February 12, 2010

@CedBaz: Using a JS based encoder is both slow and it’s a large piece of code. It’s better to use the native JPEG encoder in Gecko. And since WebKit doesn’t have direct file access we can’t do resizing at all on that browser.

@mikedeboer: We do have a financial interest in the project. So we might do a dual license here to support the development of the project. And the project is to small to have support as a business model.

Comment by Spocke — February 14, 2010

@Spocke As I understand it, using the GPLv2 license on a library like this makes it useless to all but a very narrow niche of developers — those making an open-source web platform like WordPress or Redmine. For the rest of us working on code for clients, this can’t be used at all. This is important to note, I think the website should be clearer about it.

Comment by ColonelPanic — February 18, 2010

Leave a comment

You must be logged in to post a comment.