This demo allows you to upload an image file and attach multiple files from your local computer to the server via Drag'n'Drop.

Users will see the drop areas become visible after dragging files into the browser.

<zk>
	<style src="/widgets/file_handling/dropupload/style.css" />
	<div xmlns:h="native" apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('demo.file_handling.dropupload.UserProfileViewModel')">
		<div sclass="content">
			<div sclass="photo">
				<image id="img" content="@load(vm.photo)" width="100%" height="100%"/>
			</div>
			<dropupload maxsize="50" detection="browser" anchor="${img}"
				content="Drag your photo here (max 50KB)" 
				onUpload="@command('doUploadPhoto', photo=event.media)"/>
			<div sclass="personDetails">
				<tablelayout columns="2">
					<tablechildren>Name:</tablechildren>	
					<tablechildren>Susan C.</tablechildren>	
					<tablechildren>Birth Date:</tablechildren>	
					<tablechildren>2000/12/25</tablechildren>	
					<tablechildren>E-mail:</tablechildren>	
					<tablechildren>[email protected]</tablechildren>	
					<tablechildren>Webpage:</tablechildren>	
					<tablechildren>susanc1225.wordpress.com</tablechildren>	
					<tablechildren>Status:</tablechildren>	
					<tablechildren>single</tablechildren>	
					<tablechildren>Nationality:</tablechildren>	
					<tablechildren>Canadian</tablechildren>	
				</tablelayout>
			</div>
		</div>
		<groupbox title="Attachments: " open="true" sclass="attachments">
			<div id="target" sclass="dropzone" children="@load(vm.attachments)">
				<template name="children" var="attachment">
					<span sclass="attachment">
						<a iconSclass="z-icon-paperclip" label="@load(attachment)"/>
					</span>
				</template>
			</div>
			<dropupload maxsize="1024" detection="browser" anchor="${target}"
				onUpload="@command('doUploadFiles', files=event.medias)"
				content="Drag your files here (max. 1MB) multiple allowed"/>
		</groupbox>
	</div>
</zk>

.photo { 
	border: 3px dashed #e6e6e6; 
	border-radius: 10px;
	width: 123px; 
	height: 123px;
	position: absolute; 
	overflow: hidden;
}

.content .personDetails  {
	padding-left: 133px;
}

.content .personDetails .z-label {
	line-height: 1.42em;
}

.z-dropupload {
	background-color: #f2f2f2;
	padding: 3px;
}

.z-dropupload > div{
	top: 50%;
	margin-top: -1em;
	height: 2em;
	position: absolute;
	text-align: center;
	color: #cccccc;
}

.attachments > .z-groupbox-header,
.attachments > .z-groupbox-content {
	border-color: #e6e6e6;
}
.attachments .z-groupbox-title-content {
	color: #4d4d4d;
}

.attachments .z-dropupload > div {
	width: 180px;
	padding: 0 330px;
}

.dropzone {
	min-height: 50px;
}
.attachment {
	display: inline-block;
	padding: 4px 7px;
	margin-bottom: 3px;
	background-color: #f0f0f8;
	border-radius: 4px; 
}
.attachment > a {
	text-decoration: none;
} 
.attachment > a > i {
	margin-right: 8px;
} 

package demo.file_handling.dropupload;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.util.media.Media;
import org.zkoss.zk.ui.util.Clients;

public class UserProfileViewModel {
	private Media photo;
	private List<String> attachments;
	
	@Init
	public void init() throws IOException{
		attachments = new ArrayList<String>();
	}
	
	@Command
	@NotifyChange("photo")
	public void doUploadPhoto(@BindingParam("photo") Media photo) {
		if (!photo.getContentType().startsWith("image/")) {
			Clients.showNotification("Please upload an image");
			return;
		}
		this.photo = photo;
	}
	
	@Command
	@NotifyChange("attachments")
	public void doUploadFiles(@BindingParam("files") Media[] files) {
		for (Media file : files) {
			attachments.add(file.getName());
		}
	}

	public Media getPhoto() {
		return photo;
	}

	public List<String> getAttachments() {
	    return attachments;
    }
}