ZK Dropupload example

This is another example for ZK Drag and Drop files in the zul. Apart from the official example, i have shown how to add muliple files and store in the DB and also, if browser does not support HTML 5, then user can still use button to upload their files.

image

ChosenboxViewModel.java

package demo.combobox.chosenbox;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import org.zkoss.bind.BindContext;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.io.Files;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.UploadEvent;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;

import demo.data.EmailLabels;

public class ChosenboxViewModel {

	private ListModelList<String> contactsModel = new ListModelList<String>();
	private ListModel<String> labelsModel = new ListModelList<String>(
			EmailLabels.getLabels());
	private List<String> filesList  = new ArrayList<String>();
	
	
	
	public List<String> getFilesList() {
		return filesList;
	}

	public void setFilesList(List<String> filesList) {
		this.filesList = filesList;
	}

	@Init
	public void init() {
		 
	}

	@Command("newContact")
	public void newContact(@BindingParam("contact") String contact) {
		contactsModel.add(contact);
		contactsModel.addToSelection(contact);
	}

	public ListModel<String> getContactsModel() {
		return contactsModel;
	}

	public ListModel<String> getLabelsModel() {
		return labelsModel;
	}

	@Command
	@NotifyChange("filesList")
	public void doUpload(@ContextParam(ContextType.BIND_CONTEXT) BindContext ctx) throws IOException {

		UploadEvent upEvent = null;
		Object objUploadEvent = ctx.getTriggerEvent();
		if (objUploadEvent != null && (objUploadEvent instanceof UploadEvent)) {
			upEvent = (UploadEvent) objUploadEvent;
		}
		if (upEvent != null) {
			org.zkoss.util.media.Media[] medias = upEvent.getMedias();
			String pathToStore = getDestinationFolder();
			for (org.zkoss.util.media.Media m : medias) {
				filesList.add(m.getName());
				Files.copy(new File(pathToStore + m.getName()),
						m.getStreamData());
			}
			 
		}
	}

	private String getDestinationFolder() {

		String returnPath = null;
		Calendar now = Calendar.getInstance();
		int year = now.get(Calendar.YEAR);
		int month = now.get(Calendar.MONTH); // Note: zero based!
		int day = now.get(Calendar.DAY_OF_MONTH);
		returnPath = Executions.getCurrent().getDesktop().getWebApp()
				.getRealPath("/");
		String yearPath = "\\" + "myFiles" + "\\" + year + "\\" + month + "\\"
				+ day + "\\";
		returnPath = returnPath + yearPath;
		File baseDir = new File(returnPath);
		if (!baseDir.exists()) {
			baseDir.mkdirs();
		}
		return returnPath;
	}

	@Command
	@NotifyChange("filesList")
	public void onDelete(@BindingParam("currentFile") String curFile)
	{
		filesList.remove(curFile);
	}
}


EmailContacts.java


package demo.data;

import java.util.Arrays;
import java.util.Collection;

public class EmailContacts {

	public static Collection<? extends String> getContacts() {
		return Arrays.asList("Adam (adam@company.org)",
				"Chris (chris@company.org)", "Daniel (daniel@company.org)",
				"Eve(eve@company.org)", "Fritz (fritz@company.org)",
				"Mary (mary@company.org)", "Max (max@company.org)",
				"John (john@company.org)", "Peter (peter@company.org)");
	}

}

EmailLabels.java


package demo.data;

import java.util.Arrays;
import java.util.Collection;

public class EmailLabels {

	public static Collection<? extends String> getLabels() {
		return Arrays.asList("accounts", "friends", "information", "personal",
				"products", "projects", "support", "work");
	}

}



chosenbox.zul


<zk>
	<style src="/widgets/combobox/chosenbox/style.css" />
	<vlayout hflex="1" apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('demo.combobox.chosenbox.ChosenboxViewModel')">
		<image sclass="maillogo"
			src="/widgets/combobox/chosenbox/img/logo_zkmail.png" />
		<vlayout sclass="mail" hflex="1">
			<hbox sclass="mailformrow" hflex="1" align="center">
				<label sclass="maillabel" value="Label">To</label>
				<chosenbox sclass="mailinput" hflex="1"
					model="@load(vm.contactsModel)"
					emptyMessage="type or select contacts (existing or new ones)"
					creatable="true" createMessage="Create new contact '{0}'"
					onSearch="@command('newContact', contact=event.value)"
					open="false" />
			</hbox>
			<hbox sclass="mailformrow" hflex="1" align="center">
				<label sclass="maillabel" value="Label"></label>
				<chosenbox sclass="mailinput" hflex="1"
					model="@load(vm.labelsModel)"
					emptyMessage="choose one or more labels" />
			</hbox>
			<textbox id="hereplease" sclass="mailinput" multiline="true"
				hflex="1" height="100px">
			</textbox>
		</vlayout>
		<window title="Attachment(s) You can drage and Drop here"
			id="attachwin" border="normal" height="1	80%" width="50%">
			<vlayout>
				<hlayout>
					<dropupload maxsize="5120" detection="self"
						width="570px" height="30px"
						onUpload="@command('doUpload',upEvent=event)"
						content="Drop the files here">
					</dropupload>
					<button upload="true,maxsize=5120"
						onUpload="@command('doUpload',upEvent=event)" label="Add Files">
					</button>

				</hlayout>
				<listbox height="200px" id=""
					model="@load(vm.filesList)">
					<listhead sizable="true">
						<listheader label="FileName" />
						<listheader label="Delete" />
					</listhead>
					<template name="model">
						<listitem>
							<listcell label="@bind(each)" />
							<listcell>
								<button image="DeleteRecord.png"
									onClick="@command('onDelete', currentFile=each)" />
							</listcell>
						</listitem>
					</template>
				</listbox>
			</vlayout>
		</window>
	</vlayout>


</zk>





ChosenboxViewModel.java


package demo.combobox.chosenbox;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import org.zkoss.bind.BindContext;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.io.Files;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.UploadEvent;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;

import demo.data.EmailLabels;

public class ChosenboxViewModel {

	private ListModelList<String> contactsModel = new ListModelList<String>();
	private ListModel<String> labelsModel = new ListModelList<String>(
			EmailLabels.getLabels());
	private List<String> filesList  = new ArrayList<String>();
	
	
	
	public List<String> getFilesList() {
		return filesList;
	}

	public void setFilesList(List<String> filesList) {
		this.filesList = filesList;
	}

	@Init
	public void init() {
		 
	}

	@Command("newContact")
	public void newContact(@BindingParam("contact") String contact) {
		contactsModel.add(contact);
		contactsModel.addToSelection(contact);
	}

	public ListModel<String> getContactsModel() {
		return contactsModel;
	}

	public ListModel<String> getLabelsModel() {
		return labelsModel;
	}

	@Command
	@NotifyChange("filesList")
	public void doUpload(@ContextParam(ContextType.BIND_CONTEXT) BindContext ctx) throws IOException {

		UploadEvent upEvent = null;
		Object objUploadEvent = ctx.getTriggerEvent();
		if (objUploadEvent != null && (objUploadEvent instanceof UploadEvent)) {
			upEvent = (UploadEvent) objUploadEvent;
		}
		if (upEvent != null) {
			org.zkoss.util.media.Media[] medias = upEvent.getMedias();
			String pathToStore = getDestinationFolder();
			for (org.zkoss.util.media.Media m : medias) {
				filesList.add(m.getName());
				Files.copy(new File(pathToStore + m.getName()),
						m.getStreamData());
			}
			 
		}
	}

	private String getDestinationFolder() {

		String returnPath = null;
		Calendar now = Calendar.getInstance();
		int year = now.get(Calendar.YEAR);
		int month = now.get(Calendar.MONTH); // Note: zero based!
		int day = now.get(Calendar.DAY_OF_MONTH);
		returnPath = Executions.getCurrent().getDesktop().getWebApp()
				.getRealPath("/");
		String yearPath = "\\" + "myFiles" + "\\" + year + "\\" + month + "\\"
				+ day + "\\";
		returnPath = returnPath + yearPath;
		File baseDir = new File(returnPath);
		if (!baseDir.exists()) {
			baseDir.mkdirs();
		}
		return returnPath;
	}

	@Command
	@NotifyChange("filesList")
	public void onDelete(@BindingParam("currentFile") String curFile)
	{
		filesList.remove(curFile);
	}
}

Labels: