Issues with displaying an image on a panel using a fileresource

General
1

I am having trouble displaying an image on a panel (after I uploaded it successfully). I followed the example in the book at

http://vaadin.com/book/-/page/components.upload.html#figure.ui.upload.example

and nothing is showing up and I am not getting any error(that I know of). below is my code [this is inside a com.vaadin.ui.Form]
.


    private Upload upload;
    private Panel imagePanel;
    private File file;

    ....

    this.getLayout().addComponent(upload);
    this.getLayout().addComponent(imagePanel);

    ...

    public OutputStream receiveUpload(String filename, String MIMEType) {
        FileOutputStream fos = null;
        if(this.isAllowed(MIMEType))
        {
            file = new File("/home/zulutheunique/uploads/" + filename);
            try {
                
                fos = new FileOutputStream(file);
                
            } catch (FileNotFoundException ex) {
                Logger.getLogger(Profile.class.getName()).log(Level.SEVERE, null, ex);
            }
        } else {
                ....
        }
        return fos;
    }

    public void uploadSucceeded(SucceededEvent event) {
          FileResource imageResource = new FileResource(file, this.getApplication());
          imagePanel.addComponent(new Embedded("", imageResource));
    }

I am using Netbeans 6.9.1 on Ubuntu 10.04. with Tomcat 6. I am running the web application locally [It is launched by the IDE]
. I was able to step through the code and there is no exception thrown and the file is upload correctly…it just does not show up on the image panel. Is there something I am doing wrong? or a setup that I am missing? please help. I like Vaadin very much and this is the first major issue I faced with it

2

Nothing problematic catches my eye.
This example
 works at least.

Uh, the image corruption issue in 6.5.0 is horrible. If that’s really it.

3

Ok I will try this example tonight. however I am still using 6.4.9.

Do you think it is not working because I am adding an image to a panel which is then add to a Form?

4

I tried the code in the example and it is still not working. Here is the entire java class, if there is something I am missing please let me know.


/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package Applications.Web.VieLog.UI.Panels.Wizards.User;

import Applications.Libraries.DataManagement.DBObjects.Vl_Userrecord;
import Applications.Web.VieLog.UI.Panels.Wizards.StepForm;
import com.vaadin.terminal.FileResource;
import com.vaadin.ui.Button;
import com.vaadin.ui.Embedded;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Panel;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.FailedEvent;
import com.vaadin.ui.Upload.SucceededEvent;
import com.vaadin.ui.Window.Notification;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.logging.Level;
import java.util.logging.Logger;

/**
 *
 * @author El Zede
 */
public class Profile extends UserWizardBaseForm implements Upload.SucceededListener, Upload.Receiver, Upload.FailedListener {

    private final String PNG = "image/png";
    private final String GIF = "image/gif";
    private final String JPG = "image/jpg";
    private final String JPEG = "image/jpeg";

    private Upload upload;
    private Panel imagePanel;
    private File file;
    private Embedded image;

    private Button continueButton;
    private Button cancelButton;
    private Button backButton;

    @Override
    protected void InitControls()
    {
        upload = new Upload("", this);
        upload.addListener((Upload.FailedListener)this);
        upload.addListener((Upload.SucceededListener)this);
        upload.setReceiver((Upload.Receiver)this);

        imagePanel = new Panel();
        image = new Embedded("");
        image.setVisible(false);
        imagePanel.addComponent(image);
        
        this.getLayout().addComponent(upload);
        this.getLayout().addComponent(imagePanel);
        this.getLayout().addComponent(image);

        continueButton = new Button("Complete");
        cancelButton = new Button("Cancel");
        backButton = new Button("Back");

        HorizontalLayout footer = new HorizontalLayout();
        footer.setSpacing(true);
        footer.addComponent(this.backButton);
        footer.addComponent(this.cancelButton);
        footer.addComponent(this.continueButton);

        this.getLayout().addComponent(footer);
    }

    public Profile(Vl_Userrecord user)
    {
        super("Profile Information", true, user);
    }

    @Override
    public Button getContinueButton() {
        return this.continueButton;
    }

    @Override
    public Button getBackButton() {
        return this.backButton;
    }

    @Override
    public Button getCancelButton()
    {
        return this.cancelButton;
    }

    @Override
    public StepForm getNextForm() {
        return null;
    }

    @Override
    public StepForm getPreviousForm() {
        return new Personal(this.user);
    }

    public void uploadSucceeded(SucceededEvent event) {
        final FileResource imageResource = new FileResource(file, this.getApplication());
        image.setVisible(true);
        image.setSource(imageResource);
    }

    public OutputStream receiveUpload(String filename, String MIMEType) {
        FileOutputStream fos = null;
        if(this.isAllowed(MIMEType))
        {
            file = new File("/home/zulutheunique/uploads/" + filename);
            try {
                
                fos = new FileOutputStream(file);
                
            } catch (FileNotFoundException ex) {
                Logger.getLogger(Profile.class.getName()).log(Level.SEVERE, null, ex);
            }
        } else {
            this.getWindow().showNotification("Error", "Your image must be a jpg/jpeg, png or gif file.", Notification.TYPE_ERROR_MESSAGE);
        }
        return fos;
    }

    public void uploadFailed(FailedEvent event) {
        throw new UnsupportedOperationException("Not supported yet.");
    }

    private boolean isAllowed(String MIMEType)
    {
        return (
                MIMEType.equalsIgnoreCase(this.JPEG) ||
                MIMEType.equalsIgnoreCase(this.JPG) ||
                MIMEType.equalsIgnoreCase(this.GIF) ||
                MIMEType.equalsIgnoreCase(this.PNG)
                );
    }
}

UserWizardBaseForm extends Form

5

I still don’t see a problem, but it could be something small. What are the symptoms exactly? Have you debugged that the uploadSucceeded() is called? And what other methods are called? Then, check with Firebug in the Net tab if it tries to load the image after upload.

The setVisible(false)…(true) isn’t really necessary, I just had to use it in the example to make the behavior prettier and because I can’t set a “final” variable in a listener - you could create the Embedded in the listener just as well.

6

I have found what the problem was. It had nothing to do with Vaadin at all but with my tomcat set up. It could not resolve that directory. I am working now on fix. Thanks for the help anyway.