how to upload image directly from client side to server

Question

I am using gwt web application. I want to provide users, the functionality to print screen and press Ctrl+v , for which i have provided an image element in which image will be set on pressing Ctrl+V. Now i want to upload that Image to server. I do not want to use the Up loader which select files from File system and then upload the file.

Answer 1

You can use something like this: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

You can get the file and then use a multipart/form-data request to upload it with a servlet as explained here http://hmkcode.com/java-servlet-jquery-file-upload/.

Answer 2

First of all you need a servlet in Tomcat

Then send the image to the servlet using FormData and XMLHTTPRequest2

You need to getthe image from the DOM, and then do something like that:

String url = GWT.getHostPageBaseURL() + "UploadFileServlet?sid=" + AppHelper.remoteService.getSessionID();
XMLHTTPRequest2 xhr = (XMLHTTPRequest2) XMLHTTPRequest2.create();

xhr.open("POST", url);


FormData formData = FormData.create();
formData.append("file", imagedata);


xhr.setOnReadyStateChange(new ReadyStateChangeHandler()
{

    //@Override
    public void onReadyStateChange(XMLHttpRequest xhr)
    {
        /////Window.alert(" " + xhr.getStatus());

        // When the form submission is successfully completed, this event is
        // fired. Assuming the service returned a response of type text/html,
        // we can get the result text here (see the FormPanel documentation for
        // further explanation).
        //Window.alert(event.getResults());

        String result = xhr.getResponseText();

        if(result.equals("ok"))
        {
            Window.alert("File uploaded");

        }
        else
        {
            Window.alert(result);
        }
    }
});

xhr.send(formData);

This is the FormData class

public class FormData extends JavaScriptObject {
  //default constructor
  //see more at http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#formdata
  protected FormData() {

  }

  /**
   * add a pair of value to form.
   * <p>
   * See <a href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#formdata"
   * >http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#formdata</a>.
   * 
   * @param name the name to be add
   * @param value the value to be add
   */
  public final native void append(String name, String value) /*-{
    this.append(name, value);
  }-*/;

  public final native void append(String name, JavaScriptObject value) /*-{
    this.append(name, value);
  }-*/;

  /**
   * Creates an XMLHttpRequest object.
   * 
   * @return the created object
   */
  public static native FormData create() /*-{
    return new FormData();
  }-*/;
}

And this is XMLHttpRequest2 class

public class XMLHTTPRequest2 extends XMLHttpRequest {

  /**
   * Constructor
   */
  protected XMLHTTPRequest2() {

  }

  /**
   * Initiates a request with data.  If there is no data, specify null.
   * <p>
   * See <a href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#dom-xmlhttprequest-send"
   * >http://dev.w3.org/2006/webapi/XMLHttpRequest-2/#dom-xmlhttprequest-send</a>.
   * 
   * @param requestData the data to be sent with the request
   */
  public final native <T> void send(T requestData) /*-{
    this.send(requestData);
  }-*/;
}