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);
}

Answer 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)