Form Post With Upload1_0_x

Server

Don't forget to configure a multipartResolver in the Spring context file ([Config Spring Java Config) and add commons-fileupload and commons-io libraries to the classpath if necessary (Setup Maven).

Requirements are a bit different compared to a FormPostMethod.

• These annotation are present
  • @ExtDirectMethod(ExtDirectMethodType.FORM_POST)
  • @RequestMapping
• The value of the @RequestMapping method attribute is RequestMethod.POST
• The method is a member of a Spring MVC @Controller bean
• The method has to write the response directly into the response and returns nothing

In addition add a parameter of type MultipartFile to have access to the uploaded file.

@Controller
public class UploadController {

  @ExtDirectMethod(ExtDirectMethodType.FORM_POST)
  @RequestMapping(value = "/uploadTest", method = RequestMethod.POST)
  public void uploadTest(Locale locale, HttpServletRequest request, @RequestParam("fileUpload") MultipartFile file,
      HttpServletResponse response) throws IOException {

    ExtDirectResponseBuilder builder = new ExtDirectResponseBuilder(request);
    ...
    builder.successful();
    builder.buildAndWriteUploadResponse(response);
  }
}

The class ExtDirectResponseBuilder helps building the response. The handler has to call ExtDirectResponseBuilder.buildAndWriteUploadResponse at the end of the method to write the response into the output stream of HttpServletResponse.

Client Ext JS 3.x

It's important that the property fileUpload of the class BasicInfo is set to true so that uploads are working. This example uses the extension Ext.ux.form.FileUploadField. The needed JavaScript and CSS code are part of the Ext JS distribution and are located in the examples/fileuploadfield folder.

The method is configured the same way like a normal FormPostMethod with a submit property in the api configuration.

var form = new Ext.FormPanel({
  //...
  fileUpload: true,
  items: [{
    xtype: 'fileuploadfield',
    buttonOnly: false,
    id: 'form-file',
    fieldLabel: 'File',
    name: 'fileUpload',
    buttonCfg: {
      text: '...'
    },
    //...
  },
   
  api: {
    submit: uploadController.uploadTest
  }
});

Client Ext JS 4.x

File upload support is now part of Ext JS, no extension needed. The fileUpload property must have the value true and the form needs a field with xtype 'filefield' so the user can select a file to upload.

var form = Ext.create('Ext.form.Panel', {
  //...
  fileUpload: true,
  items: [ {
    xtype: 'filefield',
    buttonOnly: false,
	fieldLabel: 'File',
    name: 'fileUpload',
    buttonText: 'Select a File...'
    }],
  api: {
    submit: uploadController.uploadTest
  }
});