1. Ext Form Field File Examples
2. Form Field Validation
3. Video File Ext

A simple example of form fields utilizing an anchor layout in a window for flexible form resizing. File Upload Field. Slider Field (New) Example usage of an.

Ext Form Field File Examples

Join the DZone community and get the full member experience.

This tutorial will walk you through out how to use the Ext JS 4 File Upload Field in the front end and Spring MVC 3 in the back end.

This tutorial is also an update for the tutorial Ajax File Upload with ExtJS and Spring Framework, implemented with Ext JS 3 and Spring MVC 2.5.

First, we will need the Ext JS 4 File upload form. This one is the same as showed in Ext JS 4 docs.

Then in the HTML page, we will have a div where we are going to render the Ext JS form. This page also contains the required javascript imports

We will also need a FileUpload Bean to represent the file as a multipart file:

Then we will need a controller. This one is implemented with Spring MVC 3.

Some people asked me how to return something to the form to display a message to the user. We can implement a POJO with a success property. The success property is the only thing Ext JS needs as a return:

Don’t forget to add the multipart file config in the Spring config file:

I also got some questions about NullPointerException. Make sure the fileupload field name has the same name as the CommonsMultipartFile property in the FileUploadBean class:

ExtJS:

Java:

Form Field Validation

These properties ALWAYS have to match!

You can still use the Spring MVC 2.5 code with the Ext JS 4 code presented in this tutorial.

Download

You can download the source code from my Github repository (you can clone the project or you can click on the download button on the upper right corner of the project page): https://github.com/loiane/extjs4-file-upload-spring

You can also download the source code form the Google Code repository: http://code.google.com/p/extjs4-file-upload-spring/

Video File Ext

Both repositories have the same source. Google Code is just an alternative.

Happy Coding!

From http://loianegroner.com/2011/07/extjs-4-file-upload-spring-mvc-3-example/

Opinions expressed by DZone contributors are their own.