EXTJS and Spring MVC Portlet File Upload

Question

I have successfully been able to upload a file to my ActionResponse method in my controller for my spring portlet using extjs. My problem is that extjs is expecting a json response in order to know the upload is complete, and the response for my action request renders out the entire portal.

I am needing a way to tell the response for my request to only be a json string.

here is my controller.

@Controller

@RequestMapping(value = "VIEW") public class MediaRoomViewController {

private static final Logger _log = Logger.getLogger(MediaRoomViewController.class);

@RenderMapping
public String renderView(RenderRequest request, RenderResponse response, Model model){
    return "view";
}

@InitBinder
protected void initBinder(PortletRequest request, PortletRequestDataBinder binder) throws Exception {
    // to actually be able to convert Multipart instance to byte[]
    // we have to register a custom editor
    binder.registerCustomEditor(byte[].class, new ByteArrayMultipartFileEditor());
    // now Spring knows how to handle multipart object and convert
}

@ActionMapping(params="action=uploadFile")
public String uploadFile(FileUploadBean uploadItem, BindingResult result,ActionResponse response) throws Exception {
    _log.debug("Upload File Action");

    ExtJSFormResult extjsFormResult = new ExtJSFormResult();
    try{
        if (result.hasErrors()){
            for(ObjectError error : result.getAllErrors()){
                System.err.println("Error: " + error.getCode() +  " - " + error.getDefaultMessage());
            }

            //set extjs return - error
            extjsFormResult.setSuccess(false);
        }

        // Some type of file processing...
        System.err.println("-------------------------------------------");
        System.err.println("Test upload: " + uploadItem.getFile().getOriginalFilename());
        System.err.println("-------------------------------------------");

        //set extjs return - sucsess
        extjsFormResult.setSuccess(true);
    }catch(Exception ex){
        _log.error(ex,ex);
    }
    return extjsFormResult.toString();
}

here is my extjs file upload code

Ext.create('Ext.form.Panel', {
            title: 'File Uploader',
            width: 400,
            bodyPadding: 10,
            frame: true,
            renderTo: self._Namespace + 'file-upload',    
            items: [{
                xtype: 'filefield',
                name: 'file',
                fieldLabel: 'File',
                labelWidth: 50,
                msgTarget: 'side',
                allowBlank: false,
                anchor: '100%',
                buttonText: 'Select a File...'
            }],

            buttons: [{
                text: 'Upload',
                handler: function() {
                    var form = this.up('form').getForm();
                    if(form.isValid()){
                        form.submit({
                            url: self._Urls[0],
                            waitMsg: 'Uploading your file...',
                            success: function(form,action) {
                               alert("success");
                            },
                            failure: function(form,action){
                                alert("error");
                            }
                        });
                    }
                }
            }]
        });

dbrin dbrin · Accepted Answer · 2011-10-27T03:56:08

There are several ways to go here:

Manually force response as text like this

response.setContentType("text/html"); //or json if u wish

responseText = "{'success':'true'}";

response.getWriter().write(responseText);
Use Jackson lib as covered here: Spring 3.0 making JSON response using jackson message converter
Move on to Grails and forget about verbose MVC configs. My preferred method :)

EXTJS and Spring MVC Portlet File Upload

1 Answers