Dipak
Dipak

Reputation: 6950

How to show file in GWT client side, instead of Downloading:

I need little help to achieve this, in my app user can upload files to server and its stored as blob object, and now i need to show them to user up on there request.

What I am up to is show in below code,

On server side I put content to response: (This code is implemented based on this blog post WaterTalks)

     resp.setContentType("text/plain");
     resp.setHeader("Content-Disposition", "attachment; filename=output.txt");

     PrintWriter out = resp.getWriter();
     out.println("This is the output content");
     out.println("Probably something dynamic should go in here:::::");


PersistenceManager pm = null;
         try {
                pm = PMF.get().getPersistenceManager();
                javax.jdo.Transaction transaction = pm.currentTransaction();
                Extent e = pm.getExtent(WaterTalkFiles.class, true);
                Iterator iter = e.iterator();
                String returns = "";
                WaterTalkFiles file  =  (WaterTalkFiles)iter.next();
                Blob blob = file.getData();
                byte[] buffer = blob.getBytes();
                String s = new String(buffer);
                out.println(s);
         } catch (Exception e) {
                e.printStackTrace();
         } finally {
                if (null != pm)
                      pm.close();
         }

Now in client side when user click show button i want to show the file content in browser, not to download it.

My client side code is:

showfilecontentButton.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                   String link = "/FileUploadByWaterTalks";
                    container.add(new HTML("<a href=\"" + link + "\">ShowFile</a>"));
            }
        });

The code above (Client side code) not showing content of file its just downloading the file. But I don't want user to download it, I want show them the content of it.

And, do I have to configure something over here to work it out.

 resp.setContentType("text/plain");
 resp.setHeader("Content-Disposition", "attachment; filename=output.txt");

Hope you got what my problem is. Please be free to share your thoughts and solutions to achieve this.

Thanks.


UPDATED

Up on the bases of first answer here, I changed some portion of my code:

updated code sections are:

    resp.setHeader("Pragma", "no-cache");



final String url = "http://127.0.0.1:8888/FileUploadByWaterTalks";
String name = "output.txt";

Anchor link1 = new Anchor(name);
RootPanel.get().add(link1);
link1.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
        Frame f = new Frame(url);
        f.setSize("600px", "400px");
        f.getElement().getStyle().setBorderWidth(0, Unit.PX);
        RootPanel.get().add(f);
      }
    });

But still the browser asking me to save the file instead of showing it in the browser itself.

Upvotes: 3

Views: 3880

Answers (1)

First remove the 'Content-Disposition' in your servlet.

Second, use a GWT Anchor in your code and when the user clicks open the link in a new window or an iframe.

Here you have a example using new window, and another using iframe:

    final String url = "http://gwtquery.googlecode.com/git/README.txt";
    String name = "README.txt";

    Anchor link1 = new Anchor(name);
    RootPanel.get().add(link1);
    link1.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        Window.open(url, "_blank", "");
      }
    });

    Anchor link2 = new Anchor(name);
    RootPanel.get().add(link2);
    link2.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        Frame f = new Frame(url);
        f.setSize("600px", "400px");
        f.getElement().getStyle().setBorderWidth(0, Unit.PX);
        RootPanel.get().add(f);
      }
    });

This approach works for any file which the browser is capable to display, but be sure that you send the appropriate Content-Type header (text/plain, text/html, image/png etc.)

Upvotes: 6

Related Questions