Attach Progress Listener to Ajax Post?

[confile]

I want to use Ajax Post and attach a progress listener to it. In jQuery I would do it like the following. Is there some way I could do that with gwtquery?

$xhrObject = $.ajax({
            xhr: function() {
                xhrNativeObject = new window.XMLHttpRequest();
                //Upload progress
                xhrNativeObject.upload.addEventListener("progress", function(event) {
                    if (event.lengthComputable) {
                        var position = event.loaded || event.position;  /*event.position is deprecated*/
                        var total = event.total;
                        xhrPercentComplete = (position / total * 100 | 0);

                        $UploadProgressbar.progressbar({value : xhrPercentComplete});
                        $UploadProgressbarLabel.html(xhrPercentComplete+" %");
                    }
                }, false);
                return xhrNativeObject;
            },
            url: url,
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false
});     

[manolo]

not yet but I'm working in a solution using promises

[manolo]

Fixed in pull-request https://github.com/gwtquery/gwtquery/pull/256

[confile]

@manolo Great! Could you post an example of how it is working?

[manolo]

Ajax methods in gQuery return a Promise like jQuery does, so you can append functions to the notification queue

Ajax.post("my_service", form)
       .progress(new Function() {
              public void f() {
                double total = arguments(0);
                double done = arguments(1);
                double percent = arguments(2);
                String type = arguments(3); // returns "upload" or "unload"
              }
        });

[manolo]

Here you have an example to upload files

import static com.google.gwt.query.client.GQuery.*;

    final FileUpload fileUpload = new FileUpload();
    RootPanel.get().add(fileUpload);

    $(fileUpload)
      // FileUpload does not have a way to set the multiple attribute, we use gQuery    
      .prop("multiple", true)
      // We use gQuery events mechanism 
      .on("change", new Function() {
        public void f() {
          // Use gQuery utils to create a FormData object instead of JSNI
          JavaScriptObject form = JsUtils.runJavascriptFunction(window, "eval", "new FormData()");
          // Get an array with the files selected
          JsArray<JavaScriptObject> files =  $(fileUpload).prop("files");
          // Add each file to the FormData
          for (int i = 0, l = files.length(); i < l; i++) {
            JsUtils.runJavascriptFunction(form, "append", "file-" + i, files.get(i));
          }

          // Use gQuery ajax instead of RequestBuilder because it supports FormData and progress
          Ajax.ajax(Ajax.createSettings().setUrl(url).setData(form))
            // gQuery ajax return a promise 
            .done(new Function() {
              public void f() {
                console.log("Files uploaded, server response is: " + arguments(0));
              }
            })
            .fail(new Function() {
              public void f() {
                console.log("Something went wrong: " + arguments(0));
              }
            })            
            .progress(new Function() {
              public void f() {
                double total = arguments(0);
                double done = arguments(1);
                double percent = arguments(2);
                console.log("Uploaded " + done + "/" + total + " (" + percent + "%)");
              }
            });
        }
    }); 

[confile]

Great thank you!

[manolo]

window is GQuery.window

On Thu, Jun 19, 2014 at 8:09 PM, Confile notifications@github.com wrote:

@manolo https://github.com/manolo Using

JavaScriptObject form = JsUtils.runJavascriptFunction(window, "eval", "new FormData()");

what is window? it must bei a JavaScriptObject. window is undefined.

— Reply to this email directly or view it on GitHub https://github.com/gwtquery/gwtquery/issues/253#issuecomment-46596025.

[confile]

great thank you