Re: GWT FileUpload with Progress Listener

2013-11-28 Thread Thomas Broyer 
Have you checked Elemental? AFAICT, everything's there already.
http://www.gwtproject.org/articles/elemental.html

On Wednesday, November 27, 2013 4:02:48 PM UTC+1, confile wrote:

  want to observe the upload percentage of a file upload from GWT.

 In JavaScript you can use a XMLHttpRequest and add an event listener like 
 this:

 var oReq = new XMLHttpRequest();

 oReq.upload.addEventListener(progress, updateProgress, false);
 // progress on transfers from the server to the client (downloads)
 function updateProgress (oEvent) {
   if (oEvent.lengthComputable) {
 var percentComplete = oEvent.loaded / oEvent.total;
 // ...
   } else {
 // Unable to compute progress information since the total size is unknown
   }}

 (The above code is from 
 herehttps://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
 .)

 This is also done very easily in jQuery as:

  var $request = $.ajax({
   xhr: function() {
 xhrNativeObject = new window.XMLHttpRequest();
 //Upload progress
 xhrNativeObject.upload.addEventListener(progress, function(event) { 
 ... }
   }
  });

 I want to do the same with GWT. I could use a 
 RequestBuilderhttp://www.gwtproject.org/javadoc/latest/com/google/gwt/http/client/RequestBuilder.html
  to 
 send a request, but this is only a high level wrapper around the 
 XMLHttpRequest JavaScriot object. Another possibility would be to use the 
 GWT 
 XMLHttpRequesthttp://www.gwtproject.org/javadoc/latest/com/google/gwt/xhr/client/XMLHttpRequest.html
  class 
 which is a JSNI wrapper of the JavaScript XMLHttpRequest.

 My problem:

 *How can I add a progress listener to the XMLHttpRequest or the 
 RequestBuilder?*


-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

Re: GWT FileUpload with Progress Listener

2013-11-28 Thread confile 
Yes, but I do not get how to use it. Can you help me with this please?

Am Donnerstag, 28. November 2013 12:20:21 UTC+1 schrieb Thomas Broyer:

 Have you checked Elemental? AFAICT, everything's there already.
 http://www.gwtproject.org/articles/elemental.html

 On Wednesday, November 27, 2013 4:02:48 PM UTC+1, confile wrote:

  want to observe the upload percentage of a file upload from GWT.

 In JavaScript you can use a XMLHttpRequest and add an event listener like 
 this:

 var oReq = new XMLHttpRequest();

 oReq.upload.addEventListener(progress, updateProgress, false);
 // progress on transfers from the server to the client (downloads)
 function updateProgress (oEvent) {
   if (oEvent.lengthComputable) {
 var percentComplete = oEvent.loaded / oEvent.total;
 // ...
   } else {
 // Unable to compute progress information since the total size is unknown
   }}

 (The above code is from 
 herehttps://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
 .)

 This is also done very easily in jQuery as:

  var $request = $.ajax({
   xhr: function() {
 xhrNativeObject = new window.XMLHttpRequest();
 //Upload progress
 xhrNativeObject.upload.addEventListener(progress, function(event) 
 { ... }
   }
  });

 I want to do the same with GWT. I could use a 
 RequestBuilderhttp://www.gwtproject.org/javadoc/latest/com/google/gwt/http/client/RequestBuilder.html
  to 
 send a request, but this is only a high level wrapper around the 
 XMLHttpRequest JavaScriot object. Another possibility would be to use the 
 GWT 
 XMLHttpRequesthttp://www.gwtproject.org/javadoc/latest/com/google/gwt/xhr/client/XMLHttpRequest.html
  class 
 which is a JSNI wrapper of the JavaScript XMLHttpRequest.

 My problem:

 *How can I add a progress listener to the XMLHttpRequest or the 
 RequestBuilder?*



-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

GWT FileUpload with Progress Listener

2013-11-27 Thread confile 


 want to observe the upload percentage of a file upload from GWT.

In JavaScript you can use a XMLHttpRequest and add an event listener like 
this:

var oReq = new XMLHttpRequest();

oReq.upload.addEventListener(progress, updateProgress, false);
// progress on transfers from the server to the client (downloads)
function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
var percentComplete = oEvent.loaded / oEvent.total;
// ...
  } else {
// Unable to compute progress information since the total size is unknown
  }}

(The above code is from 
herehttps://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
.)

This is also done very easily in jQuery as:

 var $request = $.ajax({
  xhr: function() {
xhrNativeObject = new window.XMLHttpRequest();
//Upload progress
xhrNativeObject.upload.addEventListener(progress, function(event) { 
... }
  }
 });

I want to do the same with GWT. I could use a 
RequestBuilderhttp://www.gwtproject.org/javadoc/latest/com/google/gwt/http/client/RequestBuilder.html
 to 
send a request, but this is only a high level wrapper around the 
XMLHttpRequest JavaScriot object. Another possibility would be to use the 
GWT 
XMLHttpRequesthttp://www.gwtproject.org/javadoc/latest/com/google/gwt/xhr/client/XMLHttpRequest.html
 class 
which is a JSNI wrapper of the JavaScript XMLHttpRequest.

My problem:

*How can I add a progress listener to the XMLHttpRequest or the 
RequestBuilder?*

-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

Re: GWT FileUpload with Progress Listener

2013-11-27 Thread Jens 
Well if you already know the concept of JSNI then you can use it to add a 
listener to GWT's XMLHttpRequest as its an ordinary JavaScriptObject. You 
either extend it or create a utility method. Something along these lines 
(probably not fully correct):

public native void setProgressListener(MyProgressListener p) /*-{
  this.upload.addEventListener(progress, function(event) {

p.@com.example.progress.MyProgressListener::onProgress(II)(event.loaded, 
event.total);
  }, false);
}-*/;

A utility method would have an additional XMLHttpRequest parameter and use 
request.upload instead of this.upload.

Don't forget to cleanup the event listener after you are done. Also note 
that XMLHttpRequest.create() can return an IE specific object which might 
not support the progress feature or which requires you do register the 
listener differently. So your implementation might be a bit more 
complicated depending on your browser support requirements.

-- J.

-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

Re: GWT FileUpload with Progress Listener

2013-11-27 Thread confile 
Hi Jens, 

thanks for your help. I know the concept but did not fully understand you. 

1. What do you mean by: Don't forget to cleanup the event listener after 
you are done.?

2. Did I get you right on the following. Since I use the progress for file 
upload I have to use a FormPanel. 

my progress listener class would be like: 

class MyProgressListener {
  void onProgress(int loaded, int total) {
 // so something with the data
  }
}

then I would do something like: 

final FormPanel form = new FormPanel();
form.setAction(/myFormHandler);
form.setEncoding(FormPanel.ENCODING_MULTIPART); 
form.setMethod(FormPanel.METHOD_POST);

VerticalPanel panel = new VerticalPanel();
form.setWidget(panel);

FileUpload upload = new FileUpload();
upload.setName(file);
panel.add(upload);

// Add a 'submit' button.
panel.add(new Button(Submit, new ClickHandler() {
  public void onClick(ClickEvent event) {
form.submit();
  }
}));


3. How do I integrate the setProgressListener method in the FormPanel?

Thanks for help.


Am Mittwoch, 27. November 2013 16:51:45 UTC+1 schrieb Jens:

 Well if you already know the concept of JSNI then you can use it to add a 
 listener to GWT's XMLHttpRequest as its an ordinary JavaScriptObject. You 
 either extend it or create a utility method. Something along these lines 
 (probably not fully correct):

 public native void setProgressListener(MyProgressListener p) /*-{
   this.upload.addEventListener(progress, function(event) {
 
 p.@com.example.progress.MyProgressListener::onProgress(II)(event.loaded, 
 event.total);
   }, false);
 }-*/;

 A utility method would have an additional XMLHttpRequest parameter and use 
 request.upload instead of this.upload.

 Don't forget to cleanup the event listener after you are done. Also note 
 that XMLHttpRequest.create() can return an IE specific object which might 
 not support the progress feature or which requires you do register the 
 listener differently. So your implementation might be a bit more 
 complicated depending on your browser support requirements.

 -- J.


-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

Re: GWT FileUpload with Progress Listener

2013-11-27 Thread Juan Pablo Gardella 
See https://code.google.com/p/google-web-toolkit/issues/detail?id=624 comment
23 https://code.google.com/p/google-web-toolkit/issues/detail?id=624#c23.
I've implemented a file upload with a listener and had this problem and
solved it using the workaround described there.

Juan


2013/11/27 confile michael.gorsk...@googlemail.com

 Hi Jens,

 thanks for your help. I know the concept but did not fully understand you.

 1. What do you mean by: Don't forget to cleanup the event listener after
 you are done.?

 2. Did I get you right on the following. Since I use the progress for file
 upload I have to use a FormPanel.

 my progress listener class would be like:

 class MyProgressListener {
   void onProgress(int loaded, int total) {
  // so something with the data
   }
 }

 then I would do something like:

 final FormPanel form = new FormPanel();
 form.setAction(/myFormHandler);
 form.setEncoding(FormPanel.ENCODING_MULTIPART);
 form.setMethod(FormPanel.METHOD_POST);

 VerticalPanel panel = new VerticalPanel();
 form.setWidget(panel);

 FileUpload upload = new FileUpload();
 upload.setName(file);
 panel.add(upload);

 // Add a 'submit' button.
 panel.add(new Button(Submit, new ClickHandler() {
   public void onClick(ClickEvent event) {
 form.submit();
   }
 }));


 3. How do I integrate the setProgressListener method in the FormPanel?

 Thanks for help.


 Am Mittwoch, 27. November 2013 16:51:45 UTC+1 schrieb Jens:

 Well if you already know the concept of JSNI then you can use it to add a
 listener to GWT's XMLHttpRequest as its an ordinary JavaScriptObject. You
 either extend it or create a utility method. Something along these lines
 (probably not fully correct):

 public native void setProgressListener(MyProgressListener p) /*-{
   this.upload.addEventListener(progress, function(event) {
 p.@com.example.progress.MyProgressListener::onProgress(II)(event.loaded,
 event.total);
   }, false);
 }-*/;

 A utility method would have an additional XMLHttpRequest parameter and
 use request.upload instead of this.upload.

 Don't forget to cleanup the event listener after you are done. Also note
 that XMLHttpRequest.create() can return an IE specific object which might
 not support the progress feature or which requires you do register the
 listener differently. So your implementation might be a bit more
 complicated depending on your browser support requirements.

 -- J.

  --
 You received this message because you are subscribed to the Google Groups
 Google Web Toolkit group.
 To unsubscribe from this group and stop receiving emails from it, send an
 email to google-web-toolkit+unsubscr...@googlegroups.com.
 To post to this group, send email to google-web-toolkit@googlegroups.com.
 Visit this group at http://groups.google.com/group/google-web-toolkit.
 For more options, visit https://groups.google.com/groups/opt_out.


-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

Re: GWT FileUpload with Progress Listener

2013-11-27 Thread confile 
I did not seen how to implement the progress listener in this post. Could 
you please post an example?


Am Mittwoch, 27. November 2013 18:49:42 UTC+1 schrieb Juan Pablo Gardella:

 See https://code.google.com/p/google-web-toolkit/issues/detail?id=624 comment 
 23 https://code.google.com/p/google-web-toolkit/issues/detail?id=624#c23. 
 I've implemented a file upload with a listener and had this problem and 
 solved it using the workaround described there.

 Juan


 2013/11/27 confile michael@googlemail.com javascript:

 Hi Jens, 

 thanks for your help. I know the concept but did not fully understand 
 you. 

 1. What do you mean by: Don't forget to cleanup the event listener after 
 you are done.?

 2. Did I get you right on the following. Since I use the progress for 
 file upload I have to use a FormPanel. 

 my progress listener class would be like: 

 class MyProgressListener {
   void onProgress(int loaded, int total) {
  // so something with the data
   }
 }

 then I would do something like: 

 final FormPanel form = new FormPanel();
 form.setAction(/myFormHandler);
 form.setEncoding(FormPanel.ENCODING_MULTIPART); 
 form.setMethod(FormPanel.METHOD_POST);

 VerticalPanel panel = new VerticalPanel();
 form.setWidget(panel);

 FileUpload upload = new FileUpload();
 upload.setName(file);
 panel.add(upload);

 // Add a 'submit' button.
 panel.add(new Button(Submit, new ClickHandler() {
   public void onClick(ClickEvent event) {
 form.submit();
   }
 }));


 3. How do I integrate the setProgressListener method in the FormPanel?

 Thanks for help.


 Am Mittwoch, 27. November 2013 16:51:45 UTC+1 schrieb Jens:

 Well if you already know the concept of JSNI then you can use it to add 
 a listener to GWT's XMLHttpRequest as its an ordinary JavaScriptObject. You 
 either extend it or create a utility method. Something along these lines 
 (probably not fully correct):

 public native void setProgressListener(MyProgressListener p) /*-{
   this.upload.addEventListener(progress, function(event) {
 
 p.@com.example.progress.MyProgressListener::onProgress(II)(event.loaded, 
 event.total);
   }, false);
 }-*/;

 A utility method would have an additional XMLHttpRequest parameter and 
 use request.upload instead of this.upload.

 Don't forget to cleanup the event listener after you are done. Also note 
 that XMLHttpRequest.create() can return an IE specific object which might 
 not support the progress feature or which requires you do register the 
 listener differently. So your implementation might be a bit more 
 complicated depending on your browser support requirements.

 -- J.

  -- 
 You received this message because you are subscribed to the Google Groups 
 Google Web Toolkit group.
 To unsubscribe from this group and stop receiving emails from it, send an 
 email to google-web-toolkit+unsubscr...@googlegroups.com javascript:.
 To post to this group, send email to 
 google-we...@googlegroups.comjavascript:
 .
 Visit this group at http://groups.google.com/group/google-web-toolkit.
 For more options, visit https://groups.google.com/groups/opt_out.




-- 
You received this message because you are subscribed to the Google Groups 
Google Web Toolkit group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-web-toolkit+unsubscr...@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.