How can I read a picture(s) with Vaadin's upload method?

Question

I have created a upload button, or upload buttons with Vaadin 14. Works like a charm. Perfect. But how do I access the images I uploaded? I have tried to read the tutorials on Vaadin's web page, but they only show the example I have post below. Not how to access the picture. I want to get all the pixels in a matrix form and turn them all into 0..255 gray scale.

Question:

Do you know what method to use to get the images, when I have upload or upload the pictures with this code?

@Data
public class PictureUpload {

    private Upload upload;

    public PictureUpload() {
        // Add picture uploader
        upload = new Upload();
        addPictureUploader();
    }

    private void addPictureUploader() {
        Div output = new Div();

        MultiFileMemoryBuffer buffer = new MultiFileMemoryBuffer();
        upload.setReceiver(buffer);
        upload.setAcceptedFileTypes("image/jpeg", "image/png", "image/gif");

        upload.addSucceededListener(event -> {
            Component component = createComponent(event.getMIMEType(), event.getFileName(), buffer.getInputStream(event.getFileName()));
            showOutput(event.getFileName(), component, output);
        });

    }

    private Component createComponent(String mimeType, String fileName, InputStream stream) {
        if (mimeType.startsWith("text")) {
          return createTextComponent(stream);
        } else if (mimeType.startsWith("image")) {
            Image image = new Image();
            try {

                byte[] bytes = IOUtils.toByteArray(stream);
                image.getElement().setAttribute("src", new StreamResource(fileName, () -> new ByteArrayInputStream(bytes)));
                try (ImageInputStream in = ImageIO.createImageInputStream(new ByteArrayInputStream(bytes))) {
                    final Iterator<ImageReader> readers = ImageIO.getImageReaders(in);
                    if (readers.hasNext()) {
                        ImageReader reader = readers.next();
                        try {
                            reader.setInput(in);
                            image.setWidth(reader.getWidth(0) + "px");
                            image.setHeight(reader.getHeight(0) + "px");
                        } finally {
                            reader.dispose();
                        }
                    }
                }
            } catch (IOException e) {
                e.printStackTrace();
            }

            return image;
        }
        Div content = new Div();
        String text = String.format("Mime type: '%s'\nSHA-256 hash: '%s'", mimeType, MessageDigestUtil.sha256(stream.toString()));
        content.setText(text);
        return content;

    }

  private Component createTextComponent(InputStream stream) {
    String text;
    try {
        text = IOUtils.toString(stream, StandardCharsets.UTF_8);
    } catch (IOException e) {
        text = "exception reading stream";
    }
    return new Text(text);
  }

  private void showOutput(String text, Component content, HasComponents outputContainer) {
        HtmlComponent p = new HtmlComponent(Tag.P);
        p.getElement().setText(text);
        outputContainer.add(p);
        outputContainer.add(content);
    }
}

Update:

I did some test with Mr. Lund's example code below in the comments. It seems that I have trouble to show a picture with this code:

@Data
public class LoadExportTemplate {

    private VerticalLayout subjectCounterExportButtonUploaders;

    public LoadExportTemplate() {


        subjectCounterExportButtonUploaders = new VerticalLayout();
        Upload pictureUpload = new PictureUpload().getUpload();
        Div output = new PictureUpload().getOutput();
        subjectCounterExportButtonUploaders.add(pictureUpload, output);

    }

}

Where I insert the subjectCounterExportButtonUploaders with this MainView code. I can't see the picture when I upload it.

@Route("")
@Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, viewport-fit=cover")
@PreserveOnRefresh
public class MainView extends AppLayout {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    public MainView() {

        // Get the components
        VerticalLayout buildPredictValidateTemplate = new BuildPredictValidateTemplate().getBuildButtonPredictButtonValidateButtonTextArea();
        VerticalLayout subjectCounterExportButtonUpload = new LoadExportTemplate().getSubjectCounterExportButtonUploaders();


        // Create logo and drawer
        Image barImage = new Image("img/barImage.png", "Fisherfaces Logo");
        barImage.setHeight("55px");
        addToNavbar(new DrawerToggle(), barImage);

        // Create tabs and add listeners to them
        Tab buildPredictValidate = new Tab("Build & Predict & Validate");
        buildPredictValidate.getElement().addEventListener("click", e -> {
            getContent().getChildren().forEach(component -> {
                boolean visible = component.equals(buildPredictValidateTemplate);
                component.setVisible(visible);
            });

        });
        Tab loadExport = new Tab("Load & Export");
        loadExport.getElement().addEventListener("click", e -> {
            // Walk around from the bug
            getContent().getChildren().forEach(component -> {
                boolean visible = component.equals(subjectCounterExportButtonUpload);
                component.setVisible(visible);
            });
        });

        // Set the contents
        setContent(new Div(buildPredictValidateTemplate, subjectCounterExportButtonUpload));
        subjectCounterExportButtonUpload.setVisible(false);

        // Add them and place them as vertical
        Tabs tabs = new Tabs(buildPredictValidate, loadExport);
        tabs.setOrientation(Tabs.Orientation.VERTICAL);
        addToDrawer(tabs);

    }
}

But this example works. Here I can see the picture when I upload it.

@Route(value = UploadView.ROUTE)
@PageTitle(UploadView.TITLE)
public class UploadView extends AppLayout{
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    public static final String ROUTE = "upload";
    public static final String TITLE = "Upload";

    public UploadView() {


        PictureUpload pictureUpload = new PictureUpload();
        VerticalLayout vl = new VerticalLayout();
        vl.add(pictureUpload.getUpload(),pictureUpload.getOutput());

        setContent(vl);
    }
}

Do you know why?

Answer 1

In the comments you clarified that all you want is to get the byte[] of the image after the upload. Here is how you could do that.

Variant 1: MultiFileMemoryBuffer

    MultiFileMemoryBuffer buffer = new MultiFileMemoryBuffer();
    upload.setReceiver(buffer);
    upload.setAcceptedFileTypes("image/jpeg", "image/png", "image/gif");

    upload.addSucceededListener(event -> {
        byte[] imageBytes = IOUtils.toByteArray(buffer.getInputStream(event.getFileName()));
    });

Variant 2: be your own Receiver interface

public class UploadView implements Receiver {

    private FastByteArrayOutputStream outputStream;
    private Upload upload;
    private Button actualUploadButton;

    public UploadView(){
        upload = new Upload(this);
        upload.setAcceptedFileTypes("image/jpeg", "image/png", "image/gif");
        upload.addSucceededListener(event -> {
            // uploaded file is now in outputStream
            byte[] newImageBytes = outputStream.toByteArray();

            Notification.show("We have now got the uploaded images bytearray!");
        });
        upload.setMaxFiles(10);
        actualUploadButton = new Button(getTranslation("upload-image"), VaadinIcon.UPLOAD.create());
        actualUploadButton.setWidth("100%");
        upload.setUploadButton(actualUploadButton);
        add(upload);
    }

    @Override
    public OutputStream receiveUpload(String s, String s1) {
        return outputStream = new FastByteArrayOutputStream();
    }
}