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.
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.