GWT image upload preview image before uploading to server

Question

I am using GWT FileUpload() and a form to let the user select an image and upload it to the server. What I want to do is preview the image before it gets to the server. I am only able to get the file name from the FileUpload()

 HorizontalPanel row = new HorizontalPanel();
        row.add(accounts = new ListBox());
        accounts.setWidth("200px");
        row.setStyleName("accountPositioning");
        accounts.setName("accounts");
        final Image image = new Image();
        image.setStyleName("previewImage");

        setCellSpacing(10);

        panel = new VerticalPanel();
        panel.add(row);
        panel.add(image);

        final FormPanel form = new FormPanel();
        form.setEncoding(FormPanel.ENCODING_MULTIPART);
        form.setMethod(FormPanel.METHOD_POST);

        downloadPanel = new FormPanel();
        downloadPanel.setEncoding(FormPanel.ENCODING_MULTIPART);
        downloadPanel.setMethod(FormPanel.METHOD_GET);

        deletePanel = new FormPanel();
        deletePanel.setEncoding(FormPanel.ENCODING_MULTIPART);
        deletePanel.setMethod(FormPanel.METHOD_POST);

        upload = new FileUpload();
        upload.setName("upload");
        upload.setStyleName("chooseImageButton");
        upload.setEnabled(false);
        upload.setVisible(false);

        VerticalPanel holder = new VerticalPanel();
        uploadButton = new Button("Import");
        uploadButton.setEnabled(false);
        uploadButton.setStyleName("importImageButton");
        uploadButton.setVisible(false);

        uploadButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {

                String filename = upload.getFilename();    

                if (filename.length() == 0) {
                    Window.alert("No File Specified!");
                } else {
                    int selectedIndex = accounts.getSelectedIndex();
                    accountIdStr = accounts.getValue(selectedIndex);
                    form.setAction(GWT.getModuleBaseURL()+"uploadfile" + "?entityId="+ accountIdStr);
                    form.submit();
                }
            }
        });

How can i get the file path of the image file upload using GWT FileUpload() so i can preview the image before submitting it to the server?

I am using GWT 2.7.0 version so i cant use File, or Path library

Answer 1

You're going to need to get the File object out of the element...

And you can do it like this:

@Override
public elemental.html.FileList fileSelected(FileUpload fileUpload) {
    final elemental.html.InputElement element = (elemental.html.InputElement) fileUpload.getElement();
    return element.getFiles();
}

As you can see it uses gwt elemental.

Once you've extracted the File object you can do this:

import com.google.gwt.user.client.Element;
import elemental.html.File;
import elemental.html.ImageElement;
import elemental2.dom.FileReader;

    public void loadPreview(File file) {
        FileReader reader = new FileReader();
        reader.onloadend = pe -> {
            Element element0 = this.image.getElement();
            com.google.gwt.dom.client.Element element = element0;
            ImageElement image = (ImageElement) element;
            image.setSrc(reader.result.asString());

            image.addEventListener("load", evt -> {
                LOG.debug("image loaded event {}", evt);
                int owidth = image.getWidth();
                int oheight = image.getHeight();
                LOG.debug("widht {}', height {}", owidth, oheight);

                //IMAGE_VIEW_PORT_WIDTH
                //IMAGE_VIEW_PORT_HEIGHT

                int height;
                int width;

                if (owidth >= (destAspectRatio) * oheight) {
                    height = (int) Math.round(IMAGE_VIEW_PORT_WIDTH * (oheight / (double) owidth));
                    width = IMAGE_VIEW_PORT_WIDTH;
                } else {
                    width = (int) Math.round(IMAGE_VIEW_PORT_HEIGHT * (owidth / (double) oheight));
                    height = IMAGE_VIEW_PORT_HEIGHT;
                }
                image.setWidth(width);
                image.setHeight(height);
                this.image.setVisible(true);
                LOG.debug("new width {}, new height {}", width, height);

            });
            return null;
        };
        reader.readAsDataURL((elemental2.dom.File) file);
    }

I'm sorry it's so complex - it the code that I have and I think it figures out the correct view port size so that image is set to the correct size (though I'm not 100% sure). You might get way without the image.addEventListener("load"...) handler as I believe it's the image.setSrc(reader.result.asString()) that is the money bit.

It's using a lot of elemental and elemental2 as stock gwt just doesn't give you enough exposure to the actual API you're dealing with.

Notice also that this uses the File object from elemental.