CustomField with Image display and upload option

Vaadin 6 / 7 / 8 Framework Data Binding
1

I am new to Vaadin and so far I am loving developing with it. I have hit a road-block with a requirement where I want to use and editable Image Field as part of a FieldGroup.

  1. I get a byte array of an image from the database (stored as a blob) and I convert it to StreamResource using:

StreamSource imagesource = new ImageSource(bytes); StreamResource resource = new StreamResource(imagesource, "Uploaded File"); 2. I need to display this image with an upload button where user can choose to upload a new image. This uploaded new image now replaces the image displayed in step 1.

I was thinking in terms of a CustomField creation with an Image and Upload option but I cannot seem to move further on this one.

Would be of great help if I can get my hands on a similar example or pointers in the right direction.

Thanks for the help!

2

Hi,

I haven’t tried it myself, but the
EasyUploads add-on
 contains an UploadField, which you may be able to use for this purpose. See its usage
here to upload images to the field
.

There’s also an experimental
example here
 about how to wrap an Image and Upload to a CustomField, although it is more complex and has some issues.

3

Thanks Marko, I really appreciate your response. Easyuploads UploadField seems to create more complications for me.

I think I was looking for the example you have pointed to, will give it a shot tonight and update on the progress.