GWT - image displaying to large when retrieved; however existing images are displayed correctly

Question

When I display an existing image it display's the correct size (400px wide); whereas when I import a new image it display's at the original size (ie, very large or small). How can I get the imported image to behave in the same manner as when I display an existing image?

The code I am using is:

// A panel where the thumbnails of upload images will be shown
            final HorizontalPanel existingPanelImages = new HorizontalPanel();
            final Label fileName = new Label();
            final PreloadedImage image = new PreloadedImage();

            // Load the image in the document and in the case of success attach it to the viewer
            // Attach a replacement image to the pictures viewer
            final OnLoadPreloadedImageHandler showNewImage = new OnLoadPreloadedImageHandler() {
                public void onLoad(PreloadedImage existingImage) {
                    image.setWidth("400px");
                    existingPanelImages.clear();
                    existingPanelImages.add(existingImage);
                    flexTable.setWidget(1, 2, existingPanelImages);
                    existingPanelImages.setWidth("400px");
                    existingPanelImages.setBorderWidth(1);
                    existingPanelImages.setStyleName("gwt-TextBox");
                    flexTable.getFlexCellFormatter().setRowSpan(1, 2, 7);
                    flexTable.getCellFormatter().setVerticalAlignment(1, 2, HasVerticalAlignment.ALIGN_TOP);
                    flexTable.getCellFormatter().setHorizontalAlignment(1, 2, HasHorizontalAlignment.ALIGN_CENTER);
                }
            };

            final IUploader.OnFinishUploaderHandler onReplaceFinishUploaderHandler = new IUploader.OnFinishUploaderHandler() {
                @SuppressWarnings("deprecation")
                public void onFinish(IUploader uploader) {
                    if (uploader.getStatus() == Status.SUCCESS) {
                        new PreloadedImage(uploader.fileUrl(), showNewImage);

                        //The server sends useful information to the client by default
                        UploadedInfo info = uploader.getServerInfo();
//                                          System.out.println("File name " + info.name);
//                                          System.out.println("File content-type " + info.ctype);
//                                          System.out.println("File size " + info.size);               

                        // You can send any customised message and parse it
//                                          System.out.println("Server message " + info.message);
                        //Store path to image;
                        imagePath = info.message;

                        if (info.name != null) {
                            fileName.setText(info.name);
                        }
                    }
                }
            };


            // Attach the image viewer to the document so we can get the Pack Holiday image.
            //TODO Delete temporary image when finished.
            flexTable.setWidget(1, 2, existingPanelImages);
            existingPanelImages.setWidth("400px");
            existingPanelImages.setBorderWidth(1);
            existingPanelImages.clear();
            existingPanelImages.setStyleName("gwt-TextBox");
            flexTable.getFlexCellFormatter().setRowSpan(1, 2, 7);
            flexTable.getCellFormatter().setVerticalAlignment(1, 2, HasVerticalAlignment.ALIGN_TOP);
            flexTable.getCellFormatter().setHorizontalAlignment(1, 2, HasHorizontalAlignment.ALIGN_CENTER);

            //Display the current image.
            String imageDataString = packHoliday.getEventPicture();
            final Image existingImage = new Image(imageDataString);
            existingImage.setWidth("400px");
            existingImage.setStyleName("gwt-TextBox");
            flexTable.setWidget(1, 2, existingImage);
            flexTable.getFlexCellFormatter().setRowSpan(1, 2, 7);
            flexTable.getCellFormatter().setVerticalAlignment(1, 2, HasVerticalAlignment.ALIGN_TOP);
            flexTable.getCellFormatter().setHorizontalAlignment(1, 2, HasHorizontalAlignment.ALIGN_CENTER);

            // Create a new uploader panel and attach it to a document
            final SingleUploader existingdefaultUploader = new SingleUploader();
            existingdefaultUploader.setAutoSubmit(true);
            existingdefaultUploader.setValidExtensions("jpg", "jpeg", "gif");
            existingdefaultUploader.setEnabled(true);
            existingdefaultUploader.avoidRepeatFiles(false);
            existingdefaultUploader.setStyleName("gwt-TextBox");

            // Add a finish handler which will load the image once the upload finishes
            existingdefaultUploader.addOnFinishUploadHandler(onReplaceFinishUploaderHandler);
            existingdefaultUploader.getFileInput().getWidget().setStyleName("customButton");
            existingdefaultUploader.getFileInput().getWidget().setSize("100px", "20px");

            flexTable.setWidget(7, 2, existingdefaultUploader);
            flexTable.getCellFormatter().setVerticalAlignment(7, 2, HasVerticalAlignment.ALIGN_MIDDLE);
            flexTable.getCellFormatter().setHorizontalAlignment(7, 2, HasHorizontalAlignment.ALIGN_LEFT);

Any help greatly appreciated.

Regards,

Glyn

Answer 1

After a lot of trial and error I found that I needed to add to:

public void onLoad(PreloadedImage existingImage) {

The following:

existingImage.setWidth("100%");

Regards,

Glyn