GWT upload form causing browser back to freeze page in Chrome

Question

We have an upload form in GWT we use to upload files. It works fine when uploading files, but if we upload more than two files in a row, and then click the browser back button, a strange thing happens. The page disappears, eventually reloads itself, and then freezes. No buttons are clickable until it has been reloaded. This happens in Chrome 39, but not the other browser I've tried it in (and old version of firefox).

Why would the form panel submit do something like that? How can I fix it? I can't seem to find a way to remove the form submit from history, or a simple way to upload files without using GWT's FormPanel and FileUpload. I can't just reload the page after every file upload, because refreshes are very slow.

Here's the code that creates the relevant parts of the panels:

FormPanel uploadForm = new FormPanel();
uploadForm.setEncoding(FormPanel.ENCODING_MULTIPART);
uploadForm.setMethod(FormPanel.METHOD_POST);
uploadForm.setAction(servletPath + destinationUrl);

FileUpload fileInput = new FileUpload();
uploadForm.add(fileInput.asWidget());

When the user clicks to upload a selected file, we use:

uploadForm.submit();

The GWTUploadProject is not a solution, as it works arguably worse. If you try to click back after uploading on their examples page, it shows an extra thumbnail of the previously uploaded image!

Answer 1

When you create a new FormPanel it creates as well an Frame in order to send the output of the form to it when it is submitted and not change the current page.

The problem is that the browser puts the focus on this iframe, happening that using browser history, this enters in this iframe re-firing the on-submit event.

You have different options here:

• Remove the ChangeHandler to your FileUpload when the uploading finishes.
• Remove the FormPanel from the page and create a new one, in each uploading.
• Detach the FormPanel's Frame and reattach it after the upload, so as you remove it from the history stack. This is a big hack but probably the only one if you want to reuse the same panel again, it is the approach being used in the gwtupload library.

reatachIframe(uploadForm);

private native static void reatachIframe(FormPanel form) /*-{
  var i = form.@com.google.gwt.user.client.ui.FormPanel::synthesizedFrame;
  var o = i.onload;
  i.onload = undefined;
  var p = i.parentElement;
  p.removeChild(i);
  p.appendChild(i);
  i.onload = o;
}-*/;