File Upload and Download"

From Documentation
m ((via JWB))
(4 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
=File Upload=
 
=File Upload=
<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:
+
<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:
  
#Specify <tt>upload</tt> attribute with <code>true</code> to enable file upload
+
# Specify <code>upload</code> attribute with <code>true</code> to enable file upload
#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 <code>onUpload</code> event listener to the component <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>
  
For example,
+
For example:
  
 
<source lang="xml">
 
<source lang="xml">
Line 36: Line 36:
 
</source>
 
</source>
  
There is more options for <code>upload</code> attributes, please see [[ZK Component Reference/Essential Components/Button#Upload]].
 
  
 
<blockquote>
 
<blockquote>
Line 60: Line 59:
  
  
<source lang='java' high='5'>
+
<source lang='java' highlight='5'>
  
 
public class UploadComposer extends SelectorComposer {
 
public class UploadComposer extends SelectorComposer {
Line 89: Line 88:
  
 
=Version History=
 
=Version History=
{{LastUpdated}}
+
 
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Revision as of 07:38, 8 July 2022


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 attribute with true to enable file upload
  2. Assign an onUpload event listener to the component [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.


Open File Upload Dialog

If you want the file upload on another component rather than those components above (Button, Toolbarbutton, Menu), you can call FileUpload.get() in an event listener.


Here is an example:

    <a iconSclass="z-icon-upload" ...
       apply="org.zkoss.reference.developer.uipattern.UploadComposer"/>


public class UploadComposer extends SelectorComposer {

    @Listen(Events.ON_CLICK + "= a")
    public void handleUpload(MouseEvent e) {
        Fileupload.get(1, new EventListener<UploadEvent>() {
            public void onEvent(UploadEvent event) throws Exception {
                Media[] medias = event.getMedias();
                System.out.println("upload " +  medias[0].getName());
            }
        });
    }
}

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

Version Date Content
     



Last Update : 2022/07/08

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