FileUploads with PrimeFaces 3.0 and HTML5

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;

Graceful Degradation

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.

Demo

Component is available in PrimeFaces 3.0 nightly builds and demo is at Labs Showcase.

4 Responses to FileUploads with PrimeFaces 3.0 and HTML5

  1. Nabil says:

    Thank you for your efforts.
    FileUpload is not working with Spring 3 or 2.5 and primefaces-.0-SNAPSHOT.

  2. Oleg says:

    Hello Cagatay,

    FileUpload looks good. There is a small problem in IE. Due to security restrictions IE shows “fakepath” in the file path, like C:\fakepath\image.jpg. I propose to show file name only. For this purpose I used the code snippet below in my file upload (see last method)

    http://viewvc.ametys.org/viewvc/trunk/runtime/trunk/main/kernel/resources/js/org/ametys/form/FileUploadField.i18n.js?revision=4367&view=markup&pathrev=4367

  3. James says:

    Wow, great!!!

    Would be nice if you could customize the “Browse” text…

  4. @James, that is easy with label attribute;

    p:fileUpload label=”Select Files”

%d bloggers like this: