Form Post With Upload

Since 1.2.1 the library is able to handle FORM_POST the same way as all the other method types.
FORM_POST methods written in 1.1.x style are still supported. See documentation [here](Form Post With Upload1_1_x).

If you use version 1.0.x of the library see documentation [here](Form Post With Upload1_0_x).

If you write 1.2.1 style FORM_POST methods exception handling described here Form Post Exception Handling is not needed.

Server

A FORM_POST method handles submits of a Ext.form.Panel. The method has to be annotated with @ExtDirectMethod(ExtDirectMethodType.FORM_POST) and it has to return an instance of ExtDirectFormPostResult. If such a method should handle file uploads make sure there is a multipartResolver configured in the Spring context and the libraries commons-fileupload and commons-io are in the classpath if necessary (Setup Maven).

A FORM_POST method that handles file uploads normally has one or more parameters of type type MultipartFile to access the uploaded file(s).

    @Service
    public class UploadService {

        @ExtDirectMethod(ExtDirectMethodType.FORM_POST)
        public ExtDirectFormPostResult uploadTest(@RequestParam("fileUpload") MultipartFile file) throws IOException {

            ExtDirectFormPostResult resp = new ExtDirectFormPostResult(true);

            if (file != null && !file.isEmpty()) {
                resp.addResultProperty("fileContents", new String(file.getBytes(), StandardCharsets.ISO_8859_1));
            }
            return resp;
    }

As mentioned above the upload functionality needs a MultipartResolver bean present in the Spring context. The following example shows a MultipartResolver definition for an application that uses commons-fileupload and Spring Java config.

	@Bean
	public MultipartResolver multipartResolver() {
		CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
		commonsMultipartResolver.setMaxUploadSize(52428800);
		commonsMultipartResolver.setMaxInMemorySize(20480);
		return commonsMultipartResolver;
	}

See the official Spring reference documentation for more information: http://docs.spring.io/spring/docs/4.0.0.RELEASE/spring-framework-reference/htmlsingle/#mvc-multipart

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