GWT/Javascript: Get Url Of User-Selected Local File

Question

In a program I'm writing, I'd like to have the user select an image on the local machine via a file-selection dialog and then be able to insert the path of that image as the src attribute of an img tag.

<img src="file:/path/to/selected/image.png">

I'm using GWT right now and tried the FileUpload class but the getFilename() method doesn't return a real path under most browsers -- Windows Chrome returns it as C:\fakepath\image.png.

Is there a way, either under GWT or native Javascript, that will get the real path of a locally selected file?

Answer 1

Building on the link provided by Braj... Here's how I did it:

private String imageDataUrl;

static private native void observeFileSelection(MainActivity main, Element uploader, Element error) /*-{
    function handleFileSelect(selevt) {
        error.innerHTML = "";

        var file = selevt.target.files[0];
        if (file.size > 1 * 1024 * 1024) {
            error.innerHTML = "Error: Image must be less that 1MiB in size.";
            return;
        }

        var reader = new FileReader();
        reader.onload = function (loadevt) {
            main.@com.example.app.MainActivity::setSelectedImageDataUrl(Ljava/lang/String;)(loadevt.target.result);
        }
        reader.readAsDataURL(file);
    }

    uploader.addEventListener("change", handleFileSelect, false);
}-*/;

public void setSelectedImageDataUrl(String dataurl) {
    imageDataUrl = dataurl;
}

private void handleOverlayButton() {
    final DialogBox dialog = new DialogBox();

    final HTMLPanel htmlpanel = new HTMLPanel(
            S.mainOverlayChooseText() + "<hr><div id='fileupload'></div><div id='fileerror' style='color:red'></div><hr>");
    dialog.setHTML("<b>" + S.mainOverlayChooseTitle() + "</b>");
    dialog.add(htmlpanel);
    dialog.setAnimationEnabled(true);
    dialog.setGlassEnabled(true);
    dialog.addStyleName("info-dialog");

    final FileUpload file = new FileUpload();
    file.setName("imgfile");
    htmlpanel.add(file, "fileupload");
    final SimplePanel error = new SimplePanel();
    htmlpanel.add(error, "fileerror");

    final Button ok = new Button(S.buttonOk());
    ok.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            dialog.hide();
            dialog.clear();
            setOverlayImage(imageDataUrl);
            imageDataUrl = null;
        }
    });
    htmlpanel.add(ok);

    final Button cancel = new Button(S.buttonCancel());
    cancel.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            dialog.hide();
            dialog.clear();
            imageDataUrl = null;
        }
    });
    htmlpanel.add(cancel);

    dialog.center();
    dialog.show();
    observeFileSelection(this, file.getElement(), error.getElement());
}

private void setOverlayImage(String dataurl) {
    // just for testing
    final AbsolutePanel overlay = new AbsolutePanel();
    final Image image = new Image(dataurl);
    overlay.add(image);
    RootPanel.get().add(overlay);
}

Hope that helps if others are trying to do the same.

Answer 2

I think you are interested in showing the image on client before upload on server in GWT.

Please have a look at below post:

• show image on client before upload on server in gwt

Answer 3

There's no way to get the real path of a locally selected file from a browser with javascript. It' a question of security. With HTML5 you could get the image itself and achieve what you want to achieve. THere's a nice lib for this: lib-gwt-file.jar