0

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?

Vlad Shkola
  • 15
  • 1
  • 9

1 Answers1

0

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;
});
Manolo Carrasco Moñino
  • 9,723
  • 1
  • 22
  • 27
  • Thank you for your answer, Manolo. You mention that "progress is not yet implemented in XMLHttpRequest", but what about a lot of examples XHR2 with HTML5? Something like: `var progressBar = document.getElementById("progressBar"); var xhr = new XMLHttpRequest(); xhr.upload.onprogress = function(e) { var percentComplete = (e.loaded / e.total) * 100; progressBar.value = percentComplete; }; ` – Vlad Shkola May 21 '15 at 09:44
  • Also can't find method jsni in JsUtils class neither in GWT Core lib nor GQuery, – Vlad Shkola May 21 '15 at 10:38
  • I meant the gwt class `com.google.gwt.xhr.client.XMLHttpRequest.java` not the javascript implementation. In order to use those shortcut methods you have to use gwt-query snaptshot (1.4.4-SNAPSHOT) , otherwise you have to use `JsUtils.runJavascriptFunction` instead of `JsUtils.jsni`, see my answer at : http://stackoverflow.com/questions/21088340/file-upload-with-a-progress-bar-or-accessing-the-html-5-file-api-from-google-we – Manolo Carrasco Moñino May 21 '15 at 16:08
  • Wow! I have tried GQuery lib, really nice) I also have read your answer on similar topic, but during implementation I got an error on jsni(eval, new FormData()) : [ERROR] [pvr8kapp] - Fri May 22 18:21:25 EEST 2015 com.harmonic.common.app.client.UncaughtExceptionProxy SEVERE: (ReferenceError) @com.google.gwt.query.client.js.JsUtils::runJavascriptFunctionImpl(Lcom/google/gwt/core/client/JavaScriptObject;Ljava/lang/String;Lcom/google/gwt/core/client/JsArrayMixed;)([JavaScript object(68958), string: 'eval', JavaScript object(88221)]): 'FormData' is undefined What I do wrong? – Vlad Shkola May 22 '15 at 15:25
  • Remember than `new FormData()` must be wrapped by double quote, it's a string evaluated in JS. Or is it a different issue? – Manolo Carrasco Moñino May 23 '15 at 06:17
  • Yes, I know it. Ooh, at least ajax method really invokes. But I periodically get the same error "The method getHead() is undefined for the type Document", any suggestions? – Vlad Shkola May 25 '15 at 13:08
  • as I have found... this errors occurred from Jquery Ajax.class in the next string: 490: $(document.get Head()).append(link); – Vlad Shkola May 25 '15 at 14:30
  • What is the gwt version you are using? – Manolo Carrasco Moñino Jun 03 '15 at 11:40
  • On our project we use GWT 2.5.1 v and partially 2.6.0 – Vlad Shkola Jun 03 '15 at 14:21
  • getHead() was introduced in 2014-02-27, and it's available from 2.7.0, hence you need to update your GWT version. In gwtquery we normally work with latest gwt, so we didn't realise that. If you cannot update your gwt version, open an issue in gwtquery, we could easily change the Ajax method, but that does not guarantees that gquery could have other problems with old gwt versions. – Manolo Carrasco Moñino Jun 04 '15 at 07:21