xforms:upload on steroids

If you have some experience with HTML and Ajax, you probably know that HTML upload is a funny beast. For example, if you submit an HTML form with JavaScript, you don't have control over the response and the result is an entirely new document. And you can't just submit an HTML form through Ajax either. So while you can handle all the other HTML form controls in the background and do cool thing such as server-side validation with Ajax, file upload is often just left behaving like the dumb HTML control that it is. Until recently Orbeon Forms was also limited in this respect and xforms:upload only worked when using xforms:submission with replace="all". This meant that you could not upload files in the background.

But some clever guys have figured neat tricks to overcome these limitations and allow you to upload files in the background, as if with Ajax. Applications like Gmail make use of these tricks to make their interfaces more user-friendly. While the idea is fairly simple (usually submitting an HTML form in a hidden HTML iframe), the implementation in JavaScript and DOM a little less so. Luckily, this is now part of frameworks like Dojo and YUI (which Orbeon Forms uses). It was time that we leverage this in Orbeon Forms.

So we have extended support to replace="instance" and replace="none" and you can now simply bind an upload control to an instance, submit that instance as usual, and automatically see the files selected by the user in the upload control sent to the server in the background if necessary. It's as simple as it gets:

<xforms:instance id="file-instance">
  <file name="" mediatype="" size=""/>
</xforms>
<xforms:submit ref="instance('file-instance')" replace="none" method="post" action="/send/my/file"/>
...
<xforms:upload ref="instance('file-instance')">
  <xforms:label>File to upload</xforms:label>
  <xforms:filename ref="@name"/>
  <xforms:mediatype ref="@mediatype"/>
  <xxforms:size ref="@size"/>
</xforms>

In the future we would like to support the incremental flag on xforms:upload. This will trigger file upload to the server as soon as a file is selected by the user.

Thanks to Teleflex for supporting this feature!