ExtJS Spring file upload

Question

I have ext form panel which includes file upload item. Code is shown below:

fp = new Ext.FormPanel({
         fileUpload: true,
         autoHeight: true,
         bodyStyle: 'padding: 10px 10px 0 10px;',
         labelWidth: 50,
         defaults: {
             anchor: '95%',
             allowBlank: false,
             msgTarget: 'side'
         },
         items: [
            {
                xtype: 'fileuploadfield',
                id: 'form-file',
                emptyText: 'Select excel file',
                fieldLabel: 'File',
                name: 'file',
                buttonText: 'Choose File',
                buttonCfg: {
                    iconCls: 'upload-icon'
                }
            }
         ],
         buttons: [{
            text: 'Load',
             handler: function(){                   
                if(fp.getForm().isValid()){
                  fp.getForm().submit({
                      url: myURL,
                      waitMsg: 'Uploading your photo...',
                      success: function(fp, o){
                        // I want to get loaded excel data list
                      },
                      failure : function(fp,o)
                      {
                        console.log('error');
                      }
                  });
                 }
             }
         }]
     });    

I have spring controller and some services for manipulating uploaded excel data. After I upload excel, I iterate data over excel and put them in a list.

@RequestMapping("/uploadExcel")
@ResponseBody
public Map<String, ? extends Object> uploadExcellData(@RequestParam("file") MultipartFile file)
{
    Map<String, Object> result = new HashMap<String,Object>();
    try
    {
        result = uploadService(file);
    }
    catch(Exception ex)
    {
        logger.error(ex.getMessage(), ex);
    }

    return result;
}

public Map<String,Object> uploadService(MultipartFile argFile) throws BLOException, DAOException 
{
    Map<String,Object> result = new HashMap<String,Object>(3);

    List importExcelList = null;
    try 
    {
        if (!argFile.isEmpty()) 
        {   
            importExcelList = parseExcelAndCreateListFunction(argFile.getInputStream());

            result.put("total", new Integer(importExcelList.size()));
            result.put("success", true);

            result.put("data", importExcelList);
        }
    } 
    catch (IOException e) 
    {
        logger.error(e.getMessage(), e);
    }

    return result;
}

When I run this code, I got "NetworkError: 404 Not Found". I want to return excel data list after form submit. I couldn't do this. How can I get excel data list on submit callback?

Answer 1

I have updated java file like this:

@RequestMapping("/uploadExcel")
@ResponseBody
public void uploadExcellData(@RequestParam("file") MultipartFile file, HttpServletResponse response)
{
    Map<String, Object> result = new HashMap<String,Object>();
    try
    {
        result = uploadService(file);
    }
    catch(Exception ex)
    {
        logger.error(ex.getMessage(), ex);
    }

    response.setContentType("text/html; charset=UTF-8");
    response.getWriter().write("{success:true, total:'"+result.size()+"', data:'"+result+"'}");

}

public List uploadService(MultipartFile argFile) throws BLOException, DAOException 
{
    List importExcelList = null;
    try 
    {
        if (!argFile.isEmpty()) 
        {   
            importExcelList = parseExcelAndCreateListFunction(argFile.getInputStream());
        }
    } 
    catch (IOException e) 
    {
        logger.error(e.getMessage(), e);
    }

    return importExcelList;
}

And also I have updated my js file like this:

fp = new Ext.FormPanel({
   fileUpload: true,
   autoHeight: true,
   bodyStyle: 'padding: 10px 10px 0 10px;',
   labelWidth: 50,
   defaults: {
       anchor: '95%',
       allowBlank: false,
       msgTarget: 'side'
   },
   items: [
      {
          xtype: 'fileuploadfield',
          id: 'form-file',
          emptyText: 'Select excel file',
          fieldLabel: 'File',
          name: 'file',
          buttonText: 'Choose File',
          buttonCfg: {
              iconCls: 'upload-icon'
          }
      }
   ],
   buttons: [{
      text: 'Load',
       handler: function(){                   
          if(fp.getForm().isValid()){
            fp.getForm().submit({
                url: myURL,
                waitMsg: 'Uploading your photo...',
                success: function(fp, o){
                    var resData = Ext.util.JSON.decode(o.result.data);
                    // I can iterate resData
                },
                failure : function(fp,o)
                {
                    Ext.MessageBox.alert("Failure", "your error message");
                }
            });
           }
       }
   }]
});    

I solved my problem as I stated above.