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?

Answer 1

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>

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