Upload multiple images，You can select a single image to delete?

[xuanzai5729]

Upload multiple images，You can select a single image to delete？？？？

package com.vsdata.suporeiqc.web.invinspectionitemsetting;

import com.haulmont.bali.util.ParamsMap;
import com.haulmont.cuba.core.entity.FileDescriptor;
import com.haulmont.cuba.core.global.FileStorageException;
import com.haulmont.cuba.core.global.Metadata;
import com.haulmont.cuba.gui.WindowManager;
import com.haulmont.cuba.gui.components.*;
import com.haulmont.cuba.gui.data.CollectionDatasource;
import com.haulmont.cuba.gui.data.DataSupplier;
import com.haulmont.cuba.gui.data.GroupDatasource;
import com.haulmont.cuba.gui.export.FileDataProvider;
import com.haulmont.cuba.gui.upload.FileUploadingAPI;
import com.haulmont.cuba.gui.xml.layout.ComponentsFactory;
import com.vsdata.suporeiqc.entity.iqc.*;

import javax.inject.Inject;
import java.util.*;


import com.vsdata.suporeiqc.entity.iqc.HistoricalPhoto;

public class InvInspectionItemSettingBrowse extends AbstractLookup {
    @Inject
    private TextField cInvCodeField;
    @Inject
    private TextField inventoryClassField;
    @Inject
    private TextField cInvNameField;
    @Inject
    private TextField cWareHouseField;
    @Inject
    private TextField vendorField;

    @Inject
    private CollectionDatasource<InvInspectionSettingJudge, UUID> invInspectionSettingJudgesDs;
    @Inject
    private CollectionDatasource<InvInspectionItemSetting, UUID> invInspectionItemSettingsDs;
    @Inject
    private Metadata metadata;
    private InvinspectionSetting  invinspectionSetting = null;
    private String code;

    @Inject
    private ComponentsFactory componentsFactory;
    

    @Inject
    private FileMultiUploadField multiUpload;
    @Inject
    private FileUploadingAPI fileUploadingAPI;
    @Inject
    private DataSupplier dataSupplier;
    @Inject
    protected FlowBoxLayout thumbnailsBox;
    //
    @Inject
    private HBoxLayout hbox;
    @Inject
    private GroupDatasource<HistoricalPhoto, UUID> historicalPhotosDs;
    @Inject
    private FieldGroup fieldGroup;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);
        code = (String) params.get("cInvCode");
        invInspectionItemSettingsDs.refresh(ParamsMap.of("cInvCode", code));
        invInspectionSettingJudgesDs.refresh(ParamsMap.of("cInvCode", code));
        historicalPhotosDs.refresh(ParamsMap.of("cInvCode", code));
        cInvCodeField.setValue(code);
        inventoryClassField.setValue(params.get("inventoryClass"));
        cInvNameField.setValue(params.get("cInvName"));
        cWareHouseField.setValue(params.get("warehouse"));
        vendorField.setValue(params.get("vendor"));
        invinspectionSetting = (InvinspectionSetting) params.get("invinspectionSetting");

        multiUpload.addQueueUploadCompleteListener(() -> {
            for (Map.Entry<UUID, String> entry : multiUpload.getUploadsMap().entrySet()) {
                UUID fileId = entry.getKey();
                String fileName = entry.getValue();
                FileDescriptor fd = fileUploadingAPI.getFileDescriptor(fileId, fileName);
                // save file to FileStorage
                try {
                    fileUploadingAPI.putFileIntoStorage(fileId, fd);
                } catch (FileStorageException e) {
                    new RuntimeException("Error saving file to FileStorage", e);
                }
                // save file descriptor to database
                FileDescriptor committedFd = dataSupplier.commit(fd);
                String name =committedFd.getName();

                addThumbnail(committedFd,name);
            }
            multiUpload.clearUploads();
        });

    }

    private void addThumbnail(FileDescriptor fd,String name) {
        Embedded embedded = componentsFactory.createComponent(Embedded.class);
        embedded.setSource("thumbnail-" + fd.getId(), new FileDataProvider(fd));
        embedded.setType(Embedded.Type.IMAGE);
        embedded.setWidth("100px");
        embedded.setHeight("100px");
        thumbnailsBox.add(embedded);

    }

//map.put("vendor", inventory.getVendor());

    public void onCreate(Component source) {
        Map map = new HashMap();
        map.put("invinspectionSetting",invinspectionSetting);
        map.put("invInspectionItemSettingsDs",invInspectionItemSettingsDs);
        map.put("invInspectionSettingJudgesDs",invInspectionSettingJudgesDs);
        openEditor("suporeiqc$InvInspectionItemSetting.edit",metadata.create(InvInspectionItemSetting.class), WindowManager.OpenType.DIALOG, map);
    }

    public void onEdit(Component source) {
        InvInspectionItemSetting invInspectionItemSettings = invInspectionItemSettingsDs.getItem();
        Map map = new HashMap();

        map.put("isEdit","isEdit");
        map.put("invinspectionSetting",invinspectionSetting);
        map.put("invInspectionItemSetting",invInspectionItemSettings);
        map.put("invInspectionItemSettingsDs",invInspectionItemSettingsDs);
        map.put("invInspectionSettingJudgesDs",invInspectionSettingJudgesDs);
        openEditor("suporeiqc$InvInspectionItemSetting.edit",invInspectionItemSettings, WindowManager.OpenType.DIALOG, map,invInspectionItemSettingsDs);
    }
}

[artamonov (Yuriy Artamonov)]

Hi,

Could you please describe what do you want to achieve and what have you tried so far? With all this code it is extremely hard to understand what is wrong and what do you need.

[xuanzai5729]

Select a single image and delete it.
Cannot get the current mouse click image id.
Delete image button, not implemented.

[xuanzai5729]

Select the image to highlight,Delete one of the images, how to achieve

[Pinyazhin (Roman Pinyazhin)]

Hi!

Embedded is deprecated, try to use Image component (see documentation). You can add ClickListener to Image and handle right click. For instance, by right click you can show OptionalDialog with remove action:

Example:

private void addThumbNail(FileDescriptor fileDescriptor) {
    Image image = componentsFactory.createComponent(Image.class);
    image.setWidth("100px");
    image.setHeight("100px");
    image.setScaleMode(Image.ScaleMode.CONTAIN);
    image.setSource(FileDescriptorResource.class).setFileDescriptor(fileDescriptor);
    image.setCaption(fileDescriptor.getName());

    image.addClickListener(event -> {
        if (event.getButton().ordinal() == 1) { // right click
            showOptionDialog(
                    "Remove dialog",
                    "Do you want to delete this image?",
                    MessageType.CONFIRMATION,
                    new Action[]{
                            new BaseAction("ok")
                                    .withCaption("OK")
                                    .withHandler(actionPerformedEvent -> {
                                dataSupplier.remove(fileDescriptor);
                                thumbnailsBox.remove(image);
                            }),
                            new BaseAction("cancel")
                                    .withCaption("Cancel")
                    });
        }
    });
    thumbnailsBox.add(image);
}

Or you can wrap your image to another layout with a label for file name and button for removing.
Code example:

private void addThumbNail(FileDescriptor fileDescriptor) {
    CssLayout cssLayout = componentsFactory.createComponent(CssLayout.class);
    cssLayout.setWidth("110px");
    cssLayout.setHeight("150px");

    Image image = componentsFactory.createComponent(Image.class);
    image.setWidth("100px");
    image.setHeight("100px");
    image.setScaleMode(Image.ScaleMode.CONTAIN);
    image.setSource(FileDescriptorResource.class).setFileDescriptor(fileDescriptor);

    cssLayout.add(image);

    Label label = componentsFactory.createComponent(Label.class);
    label.setValue(fileDescriptor.getName());

    cssLayout.add(label);

    Button button = componentsFactory.createComponent(Button.class);
    button.setAction(new BaseAction("remove")
            .withCaption("Remove")
            .withIcon(CubaIcon.REMOVE_ACTION.source())
            .withHandler(actionPerformedEvent -> {
                dataSupplier.remove(fileDescriptor);
                thumbnailsBox.remove(cssLayout);
            }));

    cssLayout.add(button);

    thumbnailsBox.add(cssLayout);
}

[artamonov (Yuriy Artamonov)]

The same way, you can add something like CheckBox or Button components near to each Image and remove Image from layout on click.

[xuanzai5729]

Hi Pinyazhin,
Thanks it solved my problem