Spring, Ajax, File Uploads and page refresh

[clydefrog]

Hi everyone,

I've looked everywhere for a nice concise solution to the problem of page refreshes after submitting a form to upload a file using Spring.

I am able to upload files using a custom Ajax solution with a Controller backend.

My form definition looks like so, with my custom JSON parameters as input:

    <form method='post' id='ajax_upload_form' action="rules_upload.web" enctype="multipart/form-data" onsubmit="Portal.doAjaxUpload({'formElement':'ajax_upload_form', 'statusElement':'statusdiv', 'updateElement':'testdiv'},
{'beanId':'fileUploadBean', 'eventId':'checkUploadStatus', 'progressElement':'trash'})">
        Rules Document:
        <input type="file" name="rulesfile"/>
        <input type="submit" name="submit" value="Upload"/>
    </form>

My handleRequestInternal in my Controller looks like so:

  protected ModelAndView handleRequestInternal(
      HttpServletRequest httpServletRequest,
      HttpServletResponse httpServletResponse) throws Exception {
    URL localFileLocation = null;

    try {
      // parse the file
      localFileLocation = FileUploader.handleFileUpload(httpServletRequest);
    }
    catch (IOException ioe) {
      Map<String, String> messageMap = new HashMap<String, String>();
      messageMap.put("message",
                     "There was a problem uploading the file - " +
                         ioe.getMessage());
      return new ModelAndView("upload_fail.jsp", messageMap);
    }
    return null;
  }

So, the handleFileUpload does all the commons upload stuff, and I end up with a nice file on my server. However, I get a page refresh when using this method, and the new page is blank. Is there any way of getting Spring to just stay on the same page and let my Ajax stuff update the correct portions of the page? I have some progress monitoring Ajax code going on which also seems to work, but obviously the page refresh is the big problem.

I don't want to use DWR, Spring Javascript or Web Flow (with the number of potential updates made to our pages, fragment-based page replacements aren't feasible), and I couldn't get XT to work with its very complicated set up.

Any suggestions? I'm happy to post up additional code.

Cheers

Rob

[dvestal]

I'm having a brainfart on whether or not it works the same in the onsubmit method for the form tag, but you might try moving the onsubmit in the form tag to the onclick method of the submit button. Then after your ajax javascript call return false so that the submit button doesn't actually trigger the submit.

   <form method='post' id='ajax_upload_form' action="rules_upload.web" enctype="multipart/form-data" >
        Rules Document:
        <input type="file" name="rulesfile"/>
        <input type="submit" name="submit" value="Upload" onclick="Portal.doAjaxUpload({'formElement':'ajax_upload_form', 'statusElement':'statusdiv', 'updateElement':'testdiv'},
{'beanId':'fileUploadBean', 'eventId':'checkUploadStatus', 'progressElement':'trash'}); return false;"/>
    </form>

[clydefrog]

Thanks for the reply!

The problem arises because we need to submit the form to kick off the actual upload process goverened by the upload controller. We then want another ajax call to be made (the stuff in the onsubmit or onclick) that polls another controller to check the upload progress. The ajaxy progress stuff will obviously only work if the original form has been submitted, which leads us back to the problem that the page gets refreshed due to a new ModelAndView coming back from the upload controller.

Any ideas on how to stop the ModelAndView causing a page reload? Returning null in handleRequestInternal still results in leaving the upload page...

[kwinter]

Try replacing the input type of "submit" with "button":

<form method='post' id='ajax_upload_form' action="rules_upload.web" enctype="multipart/form-data" >
        Rules Document:
        <input type="file" name="rulesfile"/>
        <input type="button" value="Upload" onclick="Portal.doAjaxUpload({'formElement':'ajax_upload_form', 'statusElement':'statusdiv', 'updateElement':'testdiv'},
{'beanId':'fileUploadBean', 'eventId':'checkUploadStatus', 'progressElement':'trash'}); return false;"/>
    </form>

or using a button element instead:

<form method='post' id='ajax_upload_form' action="rules_upload.web" enctype="multipart/form-data" >
        Rules Document:
        <input type="file" name="rulesfile"/>
        <button type="button" value="Upload" onclick="Portal.doAjaxUpload({'formElement':'ajax_upload_form', 'statusElement':'statusdiv', 'updateElement':'testdiv'},
{'beanId':'fileUploadBean', 'eventId':'checkUploadStatus', 'progressElement':'trash'}); return false;"/>
    </form>

The browser could be calling the onClick function and then still submitting because of the input type. I've done the latter without doing a full submit

[clydefrog]

I feel like a bit of a douche, but I finally sorted the problem.

I neglected to add a "target" attribute to the form element, hence the form wasn't "linked" to a target iframe where the file was to be uploaded. I added the target attribute to match the id of an iframe on the same page as the form, and the upload and subsequent ajax progress monitor now work perfectly!

I was a bit perplexed as to why Spring would forward me on to a new page when the DispatcherServlet and related ModelAndView implementations do not inherently do so!

Thanks for the replies but glad I got it worked out.