Progress percentage from browser on POST multipart request. GWT

Question

I looking for approaches to implement Progress Bar for POST multipart file upload from GWT app.

I already known about open-source GWTUpload lib and GWT AJAX-requests.

But I can't make any changes for server side, just client side.

I found out that Chrome somehow handles such progress (http://oi58.tinypic.com/2w22ekm.jpg). How I can retrieve it?

Answer 1

Since progress is not yet implemented in XMLHttpRequest, neither send a FormData, I would do with gwtquery Ajax.

I did an example in my last GWT.create presentation:

final GQuery progress = $("<div>").css($$("height: 6px, width: 0%, background: #75bff4, position: absolute, top:0px")).appendTo(document);
GQuery fileUpload = $("<input type='file' multiple >").hide().appendTo(document);
fileUpload.trigger("click");
$(fileUpload).on("change", (e) -> {
  final JsArray<JavaScriptObject> files = fileUpload.prop("files");
  JavaScriptObject formData = JsUtils.jsni("eval", "new FormData()");
  for (int i = 0, l = files.length(); i < l; i++) {
    JsUtils.jsni(formData, "append", "file-" + i, files.get(i));
  }
  Settings settings = Ajax.createSettings().setUrl(uploadUrl).setData(formData).setWithCredentials(true);
  Ajax.ajax(settings)
     .done((o) -> {
       progress.remove();
       $("<img src='" + uploadUrl + "?show=file-0-0'>").css($$("position: absolute, top: 0")).appendTo(document);
     })
     .progress((a, b) -> {
       progress.animate("width:" + b + "%");
     });
  return true;
});