Upload file in SmartGWT

来源：互联网发布：button用js页面跳转编辑：程序博客网时间：2024/05/19 16:23

Upload file in SmartGWT

Upload a file to a server from your browser is not a big deal. But how to do it, if you have:

SmartGWT (a Google Web Toolkit with a SmartClient library)
It is LGPL, so no proprietary extension on a place
You don't want to use ExtGWT just only for one single upload function and thus risk your project won't really work on older browsers that are still might be in use.
You want it nicely done at background with a clean callback, of course. :-)

Here how you do it:

In com.smartgwt.client.widgets.form.DynamicForm, set it to multipart by passing it Encoding.MULTIPART.
Create an internal iframe, using com.google.gwt.user.client.ui.NamedFrame and call it, let's say "foo" (sure no better name came into my head now, LOL). Make it 1x1 pixel width and set visibility to false. It is not actually a thing user needs to see.
Now use setTarget("foo") method to let your DynamicForm use that it as a target.
Also use setAction(url-to-your-processing-servlet) to let DynamicForm actually send stuff there. You can do it like ("upload" — is your servlet accessible):
.setAction(GWT.getModuleBaseURL() + "/upload");
Now, add mouse click handler to your IButton and use submitForm() method out of DynamicForm instance object. It will send the form and that iframe we created earlier will receive a result. This way we achieve upload in background.
Add a native JavaScript method, that will be seen normally in the loaded page, so parent windows can simply call it. That's exactly what do we need, when upload has been finished. More how to add JavaScript native methods, refer to GWT documentation about JSNI.

Now, time to write our Servlet for file upload. Great Java that comes with power station to your computer, yet has zero API to process multipart forms. This is just frustrating. But here is a cure: Apache File Upload library. Read the API how to use it. But generally, you simply iterate over fields and once you've got a filename out of the stream, you have the file. In this way you can send lots of files at once.

Your servlet should call back our method, we've defined in step #6. You simply set content type to text/html, write some simple html and a JavaScript that would call parent on window load — this way your iframe will call your client back. You may pass anything you want and respond anything. In my case it just closes upload dialog and says job done.

That's it. Implementation is up to you — use imagination... :-)

sample code
in UI
public UploadPopWindow() {
    NamedFrame frame = new NamedFrame(TARGET);
        frame.setWidth("1");
        frame.setHeight("1");
        frame.setVisible(false);
    DynamicForm uploadForm = new DynamicForm();
    VStack mainLayout = new VStack();
    mainLayout.addMember(frame);
    mainLayout.addMember(uploadForm);
    initComplete(this);
}
    private native void initComplete(UploadPopWindow upload) ;

In servlet
        response.setContentType("text/html");
        response.setHeader("Pragma", "No-cache");
        response.setDateHeader("Expires", 0);
        response.setHeader("Cache-Control", "no-cache");
        PrintWriter out;
        try {
            out = response.getWriter();
            out.println("<html>");
            out.println("<body>");
            out.println("<script type=\"text/javascript\">");
            out.println("if (parent.uploadComplete) parent.uploadComplete('"
                    + tempPath + "');");
            out.println("</script>");
        } catch (IOException e) {
            e.printStackTrace();
        }

0 0