Eclipse Community Forums: Eclipse Scout » how to capture content in ImageField using uploadEnabled

Home » Eclipse Projects » Eclipse Scout » how to capture content in ImageField using uploadEnabled

how to capture content in ImageField using uploadEnabled [message #1824468]

Wed, 15 April 2020 14:24

Eclipse User

Hello,
I am trying to capture the file that I select in the ImageField using the new feature uploadEnabled. My problem is that the execXXXX method does not capture the selection event so that I can get the file.
How to do that ?
Kind Regards

Re: how to capture content in ImageField using uploadEnabled [message #1824485 is a reply to message #1824468]

Thu, 16 April 2020 02:26

Eclipse User

Since the AbstractImageField is only a FormField and not a ValueField there's no execChangedValue() you could override. Instead the ImageField has 3 properties that may contain an image or a reference to an image:

- imageUrl: an URL pointing to an image
- imageId: an Icon ID referencing an image from your Scout application
- image: a byte[] array with raw image data

When you've enabled the "uploadEnabled" property, the uploaded image will be stored automatically in the "image" property. When you need to do something with that property in the UI you could simply add a standard PropertyChangeListener on the field for that property. But most of the time you will simply export the ImageField to a FormData and send that to a process service on the server.

Re: how to capture content in ImageField using uploadEnabled [message #1824509 is a reply to message #1824485]

Thu, 16 April 2020 11:28

Eclipse User

I added the property change listener in the intifield like this

addPropertyChangeListener(PROP_IMAGE_ID, new PropertyChangeListener() {

@Override
public void propertyChange(PropertyChangeEvent evt) {
evt.getSource();
}
});
now I need to fire property change, I do it in the getconfiguredEnableUpload ?

Re: how to capture content in ImageField using uploadEnabled [message #1824535 is a reply to message #1824509]

Fri, 17 April 2020 02:01

Eclipse User

AbstractFormField#execInitField or AbstractForm#execInitForm is a good place to attach a listener. You don't need to fire anything. That's what is done by the framework (check the method AbstractImageField#setImage to see what happens there). You just need to listen to the event and the right property. It's the "image" property PROP_IMAGE and not PROP_IMAGE_ID.

Code for execInitField would look like this:

        @Override
        protected void execInitField() {
          addPropertyChangeListener(PROP_IMAGE, new PropertyChangeListener() {
            @Override
            public void propertyChange(PropertyChangeEvent evt) {
              System.out.println("New image is " + getImage());
            }
          });
        }

getConfiguredUploadEnabled() only returns a boolean which decides whether or not a user can click or D&D on the ImageField to upload another image.

Re: how to capture content in ImageField using uploadEnabled [message #1826150 is a reply to message #1824468]

Mon, 20 April 2020 05:59

Eclipse User

Hello,
This is my code

@Order(10)
@ClassId("6366a23e-f8ba-4b50-b814-202e63daffc8")
public class PictureField extends AbstractImageField {

@Override
protected boolean getConfiguredLabelVisible() {
return false;
}

@Override
protected int getConfiguredGridH() {
return 5;
}

@Override
protected boolean getConfiguredAutoFit() {
return true;
}

@Override
protected String getConfiguredImageId() {
return Icons.fa_group;
}

@Override
protected boolean getConfiguredUploadEnabled() {
// TODO Auto-generated method stub
return true;
}

@Override
protected void execInitField() {
addPropertyChangeListener(PROP_IMAGE, new PropertyChangeListener() {
@Override
public void propertyChange(PropertyChangeEvent evt) {
System.out.println("New image is " + getImage());
}
});
}

protected void updateImage(String url) {
setImageUrl(url);
}
}

it is nevenr getting into : System.out.println("New image is " + getImage()); once I click on the image to change it.
Kind Regards

Re: how to capture content in ImageField using uploadEnabled [message #1826213 is a reply to message #1826150]

Tue, 21 April 2020 05:01

Eclipse User

You're right, there's something else required to make your case work. You must configure the drop-type property, since when upload is enabled, we re-use the existing exec* methods for drag&drop support. Below is a complete, working example. In your project you should also deal with the TODO I added in the code below. When someone uploads a 5 MB PNG, you don't want to show _that_ file as preview image in the browser. Instead you should check supported file-types, scale the image down to a thumbnail version, output the new image in a format of your choice (like JPEG) and set the new image with setImage(), instead the originally uploaded image. Of course you must also store the original image somewhere. However, all this is part of your application and not covered by the ImageField.

      @Order(10)
      @ClassId("40c78cb8-034c-46b5-a6fc-a60f973e0033")
      public class DefaultField extends AbstractImageField {

        @Override
        protected boolean getConfiguredLabelVisible() {
          return false;
        }

        @Override
        protected int getConfiguredGridH() {
          return 5;
        }

        @Override
        protected boolean getConfiguredAutoFit() {
          return true;
        }

        protected int getConfiguredDropType() {
          return IDNDSupport.TYPE_FILE_TRANSFER;
        }

        @Override
        protected void execDropRequest(TransferObject transObj) {
          if (transObj instanceof ResourceListTransferObject) {
            List<BinaryResource> resources = ((ResourceListTransferObject) transObj).getResources();
            if (resources.size() == 1) {
              // TODO: create a thumbnail image with the framework of your choice, for instance JAI
              setImage(resources.get(0));
            }
          }
        }

        @Override
        protected String getConfiguredImageId() {
          return Icons.Alarmclock;
        }

        @Override
        protected boolean getConfiguredUploadEnabled() {
          return true;
        }

        @Override
        protected void execInitField() {
          addPropertyChangeListener(PROP_IMAGE, new PropertyChangeListener() {
            @Override
            public void propertyChange(PropertyChangeEvent evt) {
              System.out.println("New image is " + getImage());
            }
          });
        }
      }

Re: how to capture content in ImageField using uploadEnabled [message #1826230 is a reply to message #1826213]

Tue, 21 April 2020 11:28

Eclipse User

It working perfectly thanks :)

Previous Topic:	Trouble with custom Property
Next Topic:	using HTML.imgByBinaryResource with Image from database

Goto Forum:

-=] Back to Top [=-

Current Time: Mon Jul 14 02:24:15 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter