Monday, December 15, 2008

fileupload with Extjs + Grails issues

Recently when I played fileupload with extjs + grails, I have several issues and take a while to identified.

1: In extjs, you need set: fileUpload: true in your formPanel. This will send multipart POST to the server side.

var imagepath = new Ext.form.FileUploadField({
id: 'form-file',
emptyText: 'Select an image',
fieldLabel: 'Photo',
name: 'imagepath',
anchor: '90%',
buttonCfg: {
text: '',
iconCls: 'upload-icon'
}
});
var formPanel = new Ext.form.FormPanel({
id: 'formPanel',
fileUpload: true,
baseCls: 'x-plain',
labelWidth: 120,
url:posurl,
defaultType: 'textfield',
items: [name, imagepath, description]
});

2: You'd better download the latest bug-fixed build (1.0.5) if you see error:

[1884908] errors.GrailsExceptionResolver
java.lang.NullPointerException
at java.net.URLDecoder.decode(URLDecoder.java:119)

There's something fundamentally wrong about how Grails handles multipart POST requests right now (since rev. 7387), but it only happens on this setup:
  • a HTTP POST multipart request is sent to the server;
  • the next request is a GET (or maybe POST also) with query parameters (eg, a query string is present in the URL);
  • Jetty (or the container) binds this next requext to the same thread that the multipart POST was bound to.
Latest build @:
http://bamboo.ci.codehaus.org/download/GRAILS-GRAILS15/artifacts/build-1462/Distributions

This build fixed above issue - 3460 [http://jira.codehaus.org/browse/GRAILS-3640]. Grails-1.1-beta1 does not fix this issue.

3: Render

For fileupload, ExtJs's formpanel is expecting JSON reply, typical HTTP 200 response is not valid and you will get error on the client side Javascript. Therefore, you need to specify the JSON response as normal "text/html" instead of "application/json" type.

No comments: