show image on client before upload on server in gwt

Question

I would like to show an image and its dimensions on the client before uploading it to the server. Whenever I try to create an Image widget of gwt ext, it doesn't accept a local file (on the file system). It only accepts http requests. I also tried String img = GWT.getHostPageBaseURL() + "image_name" and the replace function but with same result. Finally I moved to ImagePreloader but its also needs a URL.

ImagePreloader.load("URL of image", new ImageLoadHandler()
{
    public void imageLoaded(ImageLoadEvent event) 
    {
        if (event.isLoadFailed())
            Window.alert("Image " + event.getImageUrl() + "failed to load.");
        else
            Window.alert("Image dimensions: " + event.getDimensions().getWidth() + " x " + event.getDimensions().getHeight());
    }
});

Can someone suggest a solution that doesn't include uploading the image first?

score 2 · Answer 1 · edited May 23 '17 at 12:08

2

Have a look at this related question and answer:

Preview an image before it is uploaded

You can include it using JSNI. I'm now aware of a solution within GWT.

Just found gwtupload which claims to be able to preview images before uploading them.

edited May 23 '17 at 12:08

Community

1
1

answered Apr 04 '14 at 11:53

Baz

36,440
11
68
94

Thanks for reply i used gwtupload but its servlet creation a local directory structure than sending the url to client its working after uploading the file ... – Apr 07 '14 at 11:56
i am new in jsni. how its use i dont know i used it on simple java script and html but its not working . please help ... – Apr 07 '14 at 11:58
ya i see it but in the following html code how the function calling and how can i call this function using GWt Ext file upload

– Apr 08 '14 at 04:57

score 0 · Accepted Answer · answered Feb 23 '16 at 08:00

Please take a look at the sample JS code below:

function readURL(input) {

if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}
}

 $("#imgInp").change(function(){
   readURL(this);
});

and the associated HTML:

 <form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

-1 You just copied [another SO answer](http://stackoverflow.com/a/4459419/1449199) that isn't yours and posted it here. And you didn't even include the jsfiddle that shows it works. — Baz, Feb 23 '16 at 14:55

show image on client before upload on server in gwt

2 Answers2

Linked