How can I bind an uploaded file to a property of a ViewModel?
Example (not working):
MyViewModel.java
Tags
People
Badges
Help
class MyViewModel {
private bytes[] file;
// code omitted
}
myview.zul
...
<button upload="true" value="@bind(vm.file)" />
...
See this example ...
<zk>
<zscript deferred="true"><![CDATA[
import org.zkoss.util.media.Media;
Executions.getCurrent().getDesktop().setAttribute(
"org.zkoss.zul.Fileupload.target", uploadBtn);
public void processMedia(Media[] media) {
if (media != null) {
for (int i = 0; i < media.length; i++) {
if (media[i] instanceof org.zkoss.image.Image) {
image.setContent(media[i]);
} else {
Messagebox.show("Not an image: " + media[i], "Error",
Messagebox.OK, Messagebox.ERROR);
break; //not to show too many errors
}
}
}
}
]]></zscript>
<vbox>
<button id="uploadBtn" label="Upload"
onUpload="processMedia(event.getMedias());"
onClick="Fileupload.get(-1);" />
<image id="image" />
</vbox>
</zk>
It Is showing how can you capture event of file upload you are doing wrong you have to pass event in method .
In Your Zul file you have to add this line
<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.test.MyViewModel')">
<button upload="true,maxsize=1000000" onUpload="@command('getUploadedFile', media=event.media)">
</windows>
and in your viewModel MyViewModel.java you have to add a new method with @command
@Command
public void getUploadedFile(@BindingParam("media") Media myMedia) {
java.io.File myFile = new java.io.File(myMedia.getName());
Messagebox.show("path"+myFile.getAbsolutePath());
}
@bug, I think the zscript part is just for showing you the concept. so you can just read the MVVM part about how to get the uploaded object through event.media. after you have the Media, please refer to java doc http://www.zkoss.org/javadoc/latest/zk/org/zkoss/util/media/Media.html
dennis ( 2013-02-25 02:49:22 +0800 )editHi
I am trying to bind image using MVVM. But after upload, it is not showing the image. Here is the code.
<div
style="z-index:999;position:absolute;right:50px;top:56px;width:130px;height:130px;background-color:#ff99cc;">
<image id="pics" src="@bind(vm.userImage)" width="130px" />
<toolbar
style="border-color: transparent; background:none;">
<toolbarbutton
style="position:absolute;right:95px;top:136px;"
image="/images/picture_add.png" upload="true"
onUpload="@command('upload', upEvent=event)" />
<space />
<toolbarbutton image="/images/picture_delete.png"
style="position:absolute;right:-10px;top:136px;" />
</toolbar>
</div>
VM
private org.zkoss.zul.Image userImage;
@Command("upload") @NotifyChange("userImage") public void upload(@ContextParam(ContextType.BIND_CONTEXT) BindContext ctx) { UploadEvent upEvent = (UploadEvent) ctx.getTriggerEvent();
org.zkoss.util.media.Media media = upEvent.getMedia();
if (media instanceof org.zkoss.image.Image) {
userImage = new org.zkoss.zul.Image();
userImage.setContent((Image) media);
} else {
Messagebox.show("Not an image: " + media, "Error", Messagebox.OK,
Messagebox.ERROR);
}
System.out.println("uploading " + upEvent.getMedia().getName());
}
I think your image tab will be like this..
<image content="@bind(vm.myImage)" height="150px" width="300px" />
Asked: 2013-02-22 15:37:01 +0800
Seen: 178 times
Last updated: May 22 '13