Displaying images that are already maintained in the DB

Support
#1

We are utilizing a SQL DB that already has our customers logo’s maintained within the DB - ie. within a varbinary(max) column.
Is there a way to display these images within a standard browse.xml screen and edit.xml screen?

Thanks

#2

Hi,

First of all, please take a look at sample project: sample-user-avatar, it is a showcase CUBA application that demonstrates how to add pictures to system users. GitHub - cuba-platform/sample-user-avatar: Adding avatars to system users

For your case you can use Embedded component to show content of byte[] property and FileUploadingAPI for reading byte content of uploaded files.

Example, handle uploading of file and set its content to the entity field:


public class ClientEdit extends AbstractEditor<Client> {
    @Inject
    private FieldGroup fieldGroup;
    @Inject
    private ComponentsFactory componentsFactory;
    @Inject
    private FileUploadingAPI fileUploadingAPI;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        fieldGroup.addCustomField("icon", (datasource, propertyId) -> {
            FileUploadField uploadField = componentsFactory.createComponent(FileUploadField.class);

            uploadField.addFileUploadSucceedListener(e -> {
                File tempFile = fileUploadingAPI.getFile(uploadField.getFileId());

                byte[] bytes;
                try {
                    bytes = FileUtils.readFileToByteArray(tempFile);
                } catch (IOException ex) {
                    throw new RuntimeException("Unable to read file", ex);
                }

                getItem().setIcon(bytes);
            });

            return uploadField;
        });
        fieldGroup.setFieldCaption("icon", "Icon");
    }
}

Show content from entity using Embedded inside of Table:


<table id="clientsTable"
       width="100%">
    <columns>
        <column id="title"/>
        <column id="icon"/>
    </columns>
    <rows datasource="clientsDs"/>
    ...
</table>


clientsTable.addGeneratedColumn("icon", entity -> {
    if (entity.getIcon() == null) {
        return null;
    }

    Embedded icon = componentsFactory.createComponent(Embedded.class);
    icon.setHeight("30px");
    icon.setSource("icon.png", new ByteArrayInputStream(entity.getIcon()));

    return icon;
});

I’ve attached sample project so you will be able to try it in action.

db-icons-demo.zip (74.5K)