FileUploads with PrimeFaces 3.0 and HTML5
February 21, 2011 4 Comments
One of things we have been planning to improve in PrimeFaces 3.0 is the fileUpload, as of 2.2.x, only flash based uploads are supported. Although flash can provide rich functionality, it causes various side effects like session tracking, dependency to flash plugin and issues with ajax updates. So I’ve reimplemented fileUpload for 3.0 with two modes. Simple mode is what you get with native browser input type=”file” upload and other is advanced mode powered by HTML5. Features in summary are;
- Two uploader modes, simple and advanced so you can offer both to users of your application.
- Drag and Drop support from OS filesystem.
- Multi fileuploads
- Progress monitor
- Preview for images
- Cancelable Uploads
- Customizable UI with client side api
- No third party plugin like flash is required.
- Graceful degradation for legacy browsers (IE) which doesn’t support HTML5
To make things more entertaining(PrimeFaces way of doing things), I’ve created a short screencast demonstrating multiple uploads with drag and drop support;
I’ve spent an entire day on IE and results are quite good. In this case, component uses IFRAME instead of using XHR to transport the file, also IE doesn’t support progress monitoring so an animated gif is displayed to provide feedback to the user while the upload is in progress.
Component is available in PrimeFaces 3.0 nightly builds and demo is at Labs Showcase.