GWT displaying image specified from servlet

Question

I use a servlet to access a folder outside the web container to load some graphics to web application by using GWT. I use the following snippet in servlet to test the idea:

        String s = null;
        File inputFile = new File("C:\\Documents and Settings\\User\\My Documents\\My Pictures\\megan-fox.jpg");
        FileInputStream fin = null;
        try {
            fin = new FileInputStream(inputFile);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
        byte c[] = new byte[(int) inputFile.length()];
        try {
            fin.read(c);
        } catch (IOException e) {
            e.printStackTrace();
        }
        try {
            fin.close();
        } catch (IOException e1) {
            e1.printStackTrace();
        }

        String imgFolderPath = getServletContext().getRealPath("/")+"img";
        File imgFolder = new File(imgFolderPath);
        imgFolder.mkdir();

        File newImage = new File("megan-fox.jpg");
        FileOutputStream fout = null;
        try {
            fout = new FileOutputStream(newImage);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
        try {
            fout.write(c);
        } catch (IOException e) {
            e.printStackTrace();
        }
        try {
            fout.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        boolean success = newImage.renameTo(new File(imgFolderPath, newImage.getName()));

The code in servlet reads the image file from the specified folder in hard disk, creates a new folder called 'img' in war folder and copies to it the jpg file. Then it returns to the client the path to the image (for now hardcoded as) '/img/megan-fox.jpg'. The client then uses the Image class in GWT with the returned path-string to display the image, like in the following snippet:

public void onSuccess(String result) {
    String myImage = result;
    image = new Image(myImage);
    RootPanel.get().add(image);
    closeButton.setFocus(true);
}

I need to know if there is a way to achieve the same result without using the 'intermediate' step of creating a folder in the web container root (optional) and copying the file there in order to access it with Image GWT class and display it?

updated: The original servlet class.

public class GreetingServiceImpl extends RemoteServiceServlet implements
        GreetingService {

    // This method is called by the servlet container to process a GET request.
    public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        // Get the absolute path of the image
        ServletContext sc = getServletContext();
            // i want to load the image in the specified folder (outside the web container)
        String filename = sc.getRealPath("C:\\Documents and Settings\\User\\My Documents\\My Pictures\\megan-fox.jpg");

        // Get the MIME type of the image
        String mimeType = sc.getMimeType(filename);
        if (mimeType == null) {
            sc.log("Could not get MIME type of "+filename);
            resp.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
            return;
        }

        // Set content type
        resp.setContentType(mimeType);

        // Set content size
        File file = new File(filename);
        resp.setContentLength((int)file.length());

        // Open the file and output streams
        FileInputStream in = new FileInputStream(file);
        OutputStream out = resp.getOutputStream();

        // Copy the contents of the file to the output stream
        byte[] buf = new byte[1024];
        int count = 0;
        while ((count = in.read(buf)) >= 0) {
            out.write(buf, 0, count);
        }
        in.close();
        out.close();
    }

    // This is the method that is called from the client using GWT-RPC
    public String greetServer(String input) throws IllegalArgumentException {
        HttpServletRequest req = this.getThreadLocalRequest();
        HttpServletResponse res = this.getThreadLocalResponse();
        try {
            doGet(req, res);
        } catch (IOException e) {
            e.printStackTrace();
        }
        // actually i dont know what that means but i thought i would have to returned something like the image's url?
        return res.encodeURL("/img/image0.png"); 
    }
}

I logically misused the method that was proposed to solve my problem. What is the correct way?

Peter Knego Peter Knego · Accepted Answer · 2011-06-26T08:31:47

Sure, just have your servlet serve the image directly:

Set the Content-Type header to image/jpeg.
Write out image file contents to servlet response writer.

Here is an example.

GWT displaying image specified from servlet

1 Answers