In upcoming ZK 6.5, we will introduce a new component ‘Dropupload’ which leverages HTML 5 technology, allowing users to upload by dragging files into the component whilst retaining original operating habits. In addition, compared to ZK’s traditional file uploading method, ‘Dropupload’ can get rid of the overhead of pooling server (in order to check and update the uploading progress) which significantly reduces server’s loading.

Live Demo

New Attribute : detection

This attribute will define what users see when they ‘drag and drop’ files into the application i.e. how the Dropupload component and its content will appear according to their action.

There are four valid value of detection :

  • none : Ignore users’ drag action, always show Dropupload and its content.
  • browser : Dropupload is not visible in the application initially but shows up along with the content when users drag files into the browser.
  • self : Dropupload is visible in the application initially but the content only appears when users drag files into the component.
  • id of other component : Behaviour of this value is almost identical to self, except that the trigger area is inside the component of the appointed id.

Transforming the original File Viewer

Just like traditional File Upload, Dropupload component also allows you to use viewerClass attribute to set up a customized File Viewer. Customized File Viewers written in the past can still be applied to Dropupload only with the need to make some slight changes:

  • Originally, the second parameter of $init() is filenm (type: String). To apply it to the new Dropupload component, change the second parameter to file (type: File) object and add another line of filenam = file.nameto solve the issue.
  • The first parameter of update(), send would originally pass an integer value ranging from 0 to 100, representing the percentage of the uploading process whereas now it will pass the value of the already uploaded size of data in Bytes.

Boom & all good to go! Isn’t this simple!

Degree of browser compatibility?

Indeed, as Dropupload leverages HTML5 technology, some browsers does not support it. Currently, it operates normally on Firefox (v.13), Chrome (v.19) and Safari (v.5.1.x), but not functional in IE9 and Opera v.11.x

Additional restriction on detection setting, which cannot be displayed on some older machines.


For more detailed information on Dropupload, please visit here

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

5 Responses to “Dropupload: Using HTML5 to create a new file upload component”

  1. Ron Grimes says:

    Very cool new component. This reminds me of the ability we had in Yahoo Widgets – to drop a file onto a widget and be able to process it. Very slick!

  2. Bobo says:

    Very nice! Looks like a really good implementation.

  3. This is really cool. I have tried it and it works well !
    One small enhancement: it would be nice to have “native=true” option on the dropupload component. Getting string data separately of the binaries is a bit cumbersome if you just want to save the uploaded files elsewhere..

  4. Monty Pan says:

    Hi Predrag Viceic,

    Thank you for your suggestions. I have add this function, you can assign “native” attribute in the next freshly version.

    Thanks again for your feedback.

    Monty Pan

  5. Nicholas says:


    Where could i find a working example of the Dropupload?


Leave a Reply