File Upload and Download"

From Documentation
Line 2: Line 2:
  
 
=File Upload=
 
=File Upload=
You could associate the upload feature to a component, such as <javadoc>org.zkoss.zul.Button</javadoc>, <javadoc>org.zkoss.zul.Toolbarbutton</javadoc> or <javadoc>org.zkoss.zul.Menuitem</javadoc>. In other words, you could make a button or a menu item to upload a file when the user clicks on it.
+
<javadoc>org.zkoss.zul.Button</javadoc>, <javadoc>org.zkoss.zul.Toolbarbutton</javadoc> and <javadoc>org.zkoss.zul.Menuitem</javadoc> support file upload out-of-box In other words. You just need to enable it with the steps below:
  
The implementation is straightaway:
+
#Specify <tt>upload</tt> attributewith <tt>true</tt> to enable file upload
 
 
#Assign the <tt>upload</tt> attribute to true for the component used to upload a file
 
 
#Assign an event listener to the component for the <tt>onUpload</tt> event<ref>If you enabled the use of event threads, you could use <javadoc method="get()">org.zkoss.zul.Fileupload</javadoc> and related. For more information, please refer to [[ZK Developer's Reference/UI Patterns/Event Threads/File Upload|the Event Thread section]].</ref>
 
#Assign an event listener to the component for the <tt>onUpload</tt> event<ref>If you enabled the use of event threads, you could use <javadoc method="get()">org.zkoss.zul.Fileupload</javadoc> and related. For more information, please refer to [[ZK Developer's Reference/UI Patterns/Event Threads/File Upload|the Event Thread section]].</ref>
  
Line 30: Line 28:
 
</source>
 
</source>
  
You could control the maximal allowed number of files, the maximal allowed size and other information by use of <javadoc method="setUpload(java.lang.String)">org.zkoss.zul.Button</javadoc>.
+
You can control the maximal allowed number of files, the maximal allowed size, and other options. Please refer to [https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zul/Button.html#setUpload-java.lang.String- org.zkoss.zul.Button.setUpload()].
  
 
<source lang="xml">
 
<source lang="xml">

Revision as of 02:31, 21 October 2020


File Upload and Download


File Upload

Button, Toolbarbutton and Menuitem support file upload out-of-box In other words. You just need to enable it with the steps below:

  1. Specify upload attributewith true to enable file upload
  2. Assign an event listener to the component for the onUpload event[1]

For example,

<zk>
	<zscript>
	void upload(UploadEvent event) {
		org.zkoss.util.media.Media media = event.getMedia();
		if (media instanceof org.zkoss.image.Image) {
			org.zkoss.zul.Image image = new org.zkoss.zul.Image();
			image.setContent( (org.zkoss.image.Image) media);
			image.setParent(pics);
		} else {
			Messagebox.show("Not an image: "+media, "Error", Messagebox.OK, Messagebox.ERROR);
		}
	}
	</zscript>
	<button label="Upload" upload="true" onUpload="upload(event)"/>
	<vlayout id="pics" />
</zk>

You can control the maximal allowed number of files, the maximal allowed size, and other options. Please refer to org.zkoss.zul.Button.setUpload().

<menupopup>
    <menuitem label="Upload" upload="true,maxsize=-1,native"/>
</menupopup>

  1. If you enabled the use of event threads, you could use Fileupload.get() and related. For more information, please refer to the Event Thread section.


File Download

Filedownload provides a set of utilities to prompt a user for downloading a file from the server to a local folder. For example,

<button label="Download a file" onClick='Filedownload.save("~./zklogo.png", null);'/>

10000000000002AF000001BB582C2DD7.png

The file could be a static resource, an input stream, a file, a URL and others. Please refer to ZK Component Reference and Filedownload for more information.

Version History

Last Update : 2020/10/21


Version Date Content
     



Last Update : 2020/10/21

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.