Skip to content

Form Post With Upload

Jump to bottom Edit New page
ralscha edited this page Jul 10, 2012 · 19 revisions

The FORM_POST with upload method handling changed in version 1.1.0. [Here](Form Post With Upload1_0_x) you find the documentation if you use this kind of FORM_POST methods with version 1.0.x.

Server

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

Requirements are the same as a Form Post Method method has.

  • 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 returns nothing (void) and has to write the response with the help of [http://jenkins.rasc.ch/jenkins/job/ExtDirectSpring/site/apidocs/ch/ralscha/extdirectspring/bean/ExtDirectResponseBuilder.html ExtDirectResponseBuilder](Config SpringXML],).

In addition add one or more parameter(s) of type MultipartFile to have access to the uploaded file(s).

@Controller
public class UploadController {

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

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

The class ExtDirectResponseBuilder helps building the response and writes it into the http servlet response.

See also Form Post Exception Handling

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
  }
});

Examples

Add a custom footer

Table of Contents

Clone this wiki locally