native GWT : calling java method from native js

Question

I have an issue calling java from a native script. I pass the instance that I want called imagesPanel as a parameter, knowing that the instance implements ImageHolder. The Window.alert() just before the call gets called but the call never happens.

Is there something I forgot to do?

/**
 * Used this link as a model: http://blog.revathskumar.com/2012/04/html5-show-thumbnail-preview-of-image.html
 * 
 * http://www.gwtapps.com/doc/html/com.google.gwt.doc.DeveloperGuide.JavaScriptNativeInterface.JavaFromJavaScript.html
 * 
 * FIXME check file size too and eventually add a forbidden icon:  http://www.sanwebe.com/2013/10/check-input-file-size-before-submit-file-api-jquery
 * @param fileUpload
 * @param imagesPanel
 * @return
 */
protected native String initiateFilesInput(Element fileUpload, UploadItemWidget imagesPanel)/*-{
    fileUpload.children[0].children[0].addEventListener("change",
            fileUpload.addEventListener("change", function(e) {
                showThumbnail(fileUpload.children[0].children[0].files,
                        imagesPanel);
            }, false));

    $entry(function showThumbnail(files, imagesPanel) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i]
            var image = $doc.createElement("img");
            image.file = file;

            var reader = new FileReader();
            reader.onload = (function(img) {
                return function(e) {
                    img.src = e.target.result;
                    $wnd.alert('check =' + img);
                    imagesPanel.@fr.onevu.vume.client.common.widget.fileUpload.ImageHolder::addImage(Lcom/google/gwt/dom/client/Element;)(img);
                };
            }(image));

            var ret = reader.readAsDataURL(file);
        }
    })
}-*/;

@Override
public void addImage(Element image) {
    System.out.println( "adding "+ image);
    panel.getElement().appendChild(image);
}

here's the interface code

import com.google.gwt.dom.client.Element;

public interface ImageHolder {

    void addImage(Element image);
}

Braj · Accepted Answer · 2014-05-09 14:43:59Z

1

Its working fine for me after doing some of the changes.

remove all children[0].children[0]
remove $entry()

complete code:

public static native String initiateFilesInput(Element fileUpload, UploadItemWidget imagesPanel)/*-{
    fileUpload.addEventListener("change", fileUpload.addEventListener(
            "change", function(e) {
                showThumbnail(fileUpload.files, imagesPanel);
            }, false));

    function showThumbnail(files, imagesPanel) {

        for ( var i = 0; i < files.length; i++) {
            var file = files[i]
            var image = $doc.createElement("img");
            image.file = file;

            var reader = new FileReader();
            reader.onload = (function(img) {
                return function(e) {
                    img.src = e.target.result;

                    imagesPanel.@fr.onevu.vume.client.common.widget.fileUpload.ImageHolder::addImage(Lcom/google/gwt/dom/client/Element;)(img);
                };
            }(image));

            var ret = reader.readAsDataURL(file);
        }
    }
}-*/;

missing part of the code in your original post. Please validate.

public class ImageHolder implements UploadItemWidget {

    public SimplePanel panel = new SimplePanel();

    public FileUpload fileUpload = new FileUpload();

    public ImageHolder() {
        panel.add(fileUpload);
    }
    ...
}

Entry point class

public void onModuleLoad() {

    ImageHolder imageHolder = new ImageHolder();
    RootPanel.get().add(imageHolder.panel);

    ImageHolder.initiateFilesInput(imageHolder.fileUpload.getElement(), imageHolder);
}

Screenshot: (3 images are selected)

enter image description here

edited May 9, 2014 at 14:43

answered May 9, 2014 at 14:26

Braj

46.9k5 gold badges63 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zied Hamdi Over a year ago

Hi Braj, Thanks for your reply. The issue I have is then that fileUpload is an iFrame (that's why I'm not getting it working) I added the $entry because I thought : maybe the script is not seeing the method showThumbnail() but it was out of despair (i know it should see it), so if you replace public FileUpload fileUpload = new FileUpload(); with an IFrame the issue will be visible. Actually it's for this purpose: groups.google.com/forum/#!topic/gwtupload/O1cjVxK-HTQ

Zied Hamdi Over a year ago

I'll put your answer as correct since my question is not well asked :-/

Collectives™ on Stack Overflow

native GWT : calling java method from native js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related