binding uploaded file

asked 2013-02-22 15:37:01 +0800

bug gravatar image bug
12 2

updated 2013-02-22 15:45:40 +0800

How can I bind an uploaded file to a property of a ViewModel?

Example (not working):


class MyViewModel {
   private bytes[] file;
   // code omitted


<button upload="true" value="@bind(vm.file)" />
delete flag offensive retag edit

3 Answers

Sort by » oldest newest most voted

answered 2013-02-22 17:34:16 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8

updated 2013-02-24 11:59:21 +0800

See this example ...

    <zscript deferred="true"><![CDATA[
    import org.zkoss.util.media.Media;

            "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) {
                } else {
                    Messagebox.show("Not an image: " + media[i], "Error",
                            Messagebox.OK, Messagebox.ERROR);
                    break; //not to show too many errors
        <button id="uploadBtn" label="Upload"
            onClick="Fileupload.get(-1);" />
        <image id="image" />

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)">

and in your viewModel MyViewModel.java you have to add a new method with @command

public void getUploadedFile(@BindingParam("media") Media myMedia)    {
          java.io.File myFile = new java.io.File(myMedia.getName());

link publish delete flag offensive edit


You have not answered to my question. Your example doesn’t show how to bind a binary file to a property in a ViewModel. Beside, don’t assume I always want to upload an image file, please.

bug ( 2013-02-23 09:15:40 +0800 )edit

FYi..media contain other files also please refer Zk documents.Answer also edited

sjoshi ( 2013-02-24 11:54:19 +0800 )edit

@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 )edit

answered 2013-05-21 15:10:54 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8


I am trying to bind image using MVVM. But after upload, it is not showing the image. Here is the code.

            <image id="pics" src="@bind(vm.userImage)" width="130px" />
                style="border-color: transparent; background:none;">
                    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;" />


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,
    System.out.println("uploading " + upEvent.getMedia().getName());
link publish delete flag offensive edit

answered 2013-05-22 07:38:55 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8

I think your image tab will be like this..

<image content="@bind(vm.myImage)" height="150px" width="300px" />
link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2013-02-22 15:37:01 +0800

Seen: 178 times

Last updated: May 22 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More