Upload Image Returned Binary value Missing

[zhene]

Hello,

I created a widget that uses a DynamicForm with an UploadItem and a TileGrid that is data bound. The TileGrid displays binary images that are uploaded . Unfortunately, when I add a new image, the returned data is missing the binary field (which is a Base64 image). I've tried refetching the data after adding an image on the server side but that also did not include the binary field.

Here is my code:

Dynamic form:

final DynamicForm imageForm = new DynamicForm();
imageForm.setDataSource(DATASOURCE);
imageForm.setSaveOperationType(DSOperationType.ADD);
uploadItem = new UploadItem("image");
uploadItem.setColSpan(2);
uploadItem.setWrapTitle(false);
uploadItem.setAccept(".jpg,.png,.jpeg");
uploadItem.setMultiple(false);
imageForm.setFields(uploadItem);

A Button is added to handle the upload by calling "imageForm.saveData()"

TileGrid:

tileGrid = new TileGrid();
tileGrid.setTileWidth(200);
tileGrid.setWidth100();
tileGrid.setHeight100();
tileGrid.setSelectionType(SelectionStyle.SINGLE);
tileGrid.setDataSource(ds);
tileGrid.setCanReorderTiles(true);
tileGrid.setShowAllRecords(true);
tileGrid.setAutoFetchData(true);
tileGrid.setAnimateTileChange(true);
tileGrid.setHoverWrap(true);
tileGrid.setShowHover(true);

final DetailViewerField imageField = new DetailViewerField("image);
imageField.setType("image");
imageField.setDetailFormatter((o, record, detailViewerField) -> {
final String url = "data:" + record.getAttribute(MIME_TYPE) + ";base64," + o;
detailViewerField.setImageSize(new Img(url).getSize());
return url;
});

tileGrid.setFields(imageField, new DetailViewerField(NAME), new DetailViewerField(TYPE_ID));
tileGrid.addRecordClickHandler(event -> ds.viewFile(event.getRecord()));

final SimpleTile tileProps = new SimpleTile();
tileProps.setCanHover(true);
tileProps.setHoverWrap(true);
tileProps.setShowHoverComponents(true);
tileProps.addHoverHandler(event -> {
Hover.hide();
Hover.show(tileGrid.getTileRecord(event.getFiringCanvas()).getAttribute(DESCRIPTION), new Label());
});
tileGrid.setCanHover(true);
tileGrid.setHoverWrap(true);
tileGrid.setShowHoverComponents(true);
tileGrid.setTileProperties(tileProps);


tileGrid.fetchData(CRITERIA);

Datasource field

<field name="image" type="binary" encodeInResponse="true"/>

[Isomorphic]

This would appear to indicate that the binary value was never saved, right? So first place to start is the logs for the save, and if those are unclear, check the DB to see if there is anything wrong with the value - if our framework can’t fetch it, that generally means there’s a JDBC-level issue.

[zhene]

I have been able to get the binary response on the serverside using a bean but it is not included on the client side. What would be causing this issue?

[Isomorphic]

So you are saying that you can look in a DMI and see the binary value but by the time the response makes it to the client, it's gone? And yet you're also reporting that other binary values do make it to the client - once that you did not save in the UI?

That doesn't really make sense, so try to find the difference between the binary values that are working and are not.

[zhene]

I only have one binary field ("image"). Once I upload and save an image, the binary field is returned on the serverside but not the client. I have to close the window and reopen it for the field to be present (which displays the image).

[Isomorphic]

As we covered above, you should add some logic via DMI so you can see whether the binary data is present in the DSResponse on the server before serialization occurs. Probably, it's not.

One possibility here is that whatever operationBinding is being used for cache sync (see eg operationBinding.cacheSyncOperation) does not have "outputs" set so the binary field is (correctly) not included.

[zhene]

No matter what I tried, I was unable to return the binary field to the client after adding. This was my work around.

@Override public DSResponse add(final DSRequest dsRequest, final RPCManager rpcManager) throws ApplicationException {
try {
  final DSResponse response = dsRequest.execute();
  final Map<String, Object> values = response.getRecord();
  final ByteArrayInputStream image= (ByteArrayInputStream) values.get("image");
  final byte[] bytes = IOUtils.toByteArray(image);
  final String imageString = Base64.getEncoder().encodeToString(bytes);
  values.put("image", imageString);
  response.setData(values);
  return response;
} catch (final Exception e) {
  throw new ApplicationException(e, SmartGWTStatusCode.STATUS_FAILURE);
 }
}

Hope this helps

[Isomorphic]

This is fixed and will be available for download in nightly builds since July 3 (today).