ExtJS 4 File Upload + Spring MVC 3 Example

July 18, 2011 | By

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.

extjs4 file upload spring loiane ExtJS 4 File Upload + Spring MVC 3 Example

Ext JS File Upload Form

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

Ext.onReady(function(){

    Ext.create('Ext.form.Panel', {
        title: 'File Uploader',
        width: 400,
        bodyPadding: 10,
        frame: true,
        renderTo: 'fi-form',    
        items: [{
            xtype: 'filefield',
            name: 'file',
            fieldLabel: 'File',
            labelWidth: 50,
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: 'Select a File...'
        }],

        buttons: [{
            text: 'Upload',
            handler: function() {
                var form = this.up('form').getForm();
                if(form.isValid()){
                    form.submit({
                        url: 'upload.action',
                        waitMsg: 'Uploading your file...',
                        success: function(fp, o) {
                            Ext.Msg.alert('Success', 'Your file has been uploaded.');
                        }
                    });
                }
            }
        }]
    });
});

HTML Page

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:

<html>
<head>
<title>Spring FileUpload Example with ExtJS 4 Form</title>

	<!-- Ext JS Files -->
	<link rel="stylesheet" type="text/css" href="/extjs4-file-upload-spring/extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="/extjs4-file-upload-spring/extjs/bootstrap.js"></script>
	
	<!-- file upload form -->
	<script src="/extjs4-file-upload-spring/js/file-upload.js"></script>

</head>
<body>

	<p>Click on "Browse" button (image) to select a file and click on Upload button</p>
	
	<div id="fi-form" style="padding:25px;"></div>
</body>
</html>

FileUpload Bean

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

package com.loiane.model;

import org.springframework.web.multipart.commons.CommonsMultipartFile;

/**
 * Represents file uploaded from extjs form
 * 
 * @author Loiane Groner
 * http://loiane.com
 * http://loianegroner.com
 */
public class FileUploadBean {

	private CommonsMultipartFile file;

	public CommonsMultipartFile getFile() {
		return file;
	}

	public void setFile(CommonsMultipartFile file) {
		this.file = file;
	}
}

File Upload Controller

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

package com.loiane.controller;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ObjectError;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.loiane.model.ExtJSFormResult;
import com.loiane.model.FileUploadBean;

/**
 * Controller - Spring
 * 
 * @author Loiane Groner
 * http://loiane.com
 * http://loianegroner.com
 */
@Controller
@RequestMapping(value = "/upload.action")
public class FileUploadController {

	@RequestMapping(method = RequestMethod.POST)
	public @ResponseBody String create(FileUploadBean uploadItem, BindingResult result){

		ExtJSFormResult extjsFormResult = new ExtJSFormResult();
		
		if (result.hasErrors()){
			for(ObjectError error : result.getAllErrors()){
				System.err.println("Error: " + error.getCode() +  " - " + error.getDefaultMessage());
			}
			
			//set extjs return - error
			extjsFormResult.setSuccess(false);
			
			return extjsFormResult.toString();
		}

		// Some type of file processing...
		System.err.println("-------------------------------------------");
		System.err.println("Test upload: " + uploadItem.getFile().getOriginalFilename());
		System.err.println("-------------------------------------------");
		
		//set extjs return - sucsess
		extjsFormResult.setSuccess(true);
		
		return extjsFormResult.toString();

}

Ext JS Form Return

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:

package com.loiane.model;

/**
 * A simple return message for Ext JS
 * 
 * @author Loiane Groner
 * http://loiane.com
 * http://loianegroner.com
 */
public class ExtJSFormResult {

	private boolean success;
	
	public boolean isSuccess() {
		return success;
	}
	public void setSuccess(boolean success) {
		this.success = success;
	}
	
	public String toString(){
		return "{success:"+this.success+"}";
	}
}

Spring Config

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

    <!-- Configure the multipart resolver -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- one of the properties available; the maximum file size in bytes -->
        <property name="maxUploadSize" value="100000"/>
    </bean>

NullPointerException

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:

{
	xtype: 'filefield',
	name: 'file',
	fieldLabel: 'File',
	labelWidth: 50,
	msgTarget: 'side',
	allowBlank: false,
	anchor: '100%',
	buttonText: 'Select a File...'
}

Java:

public class FileUploadBean {

	private CommonsMultipartFile file;
}

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/

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

Happy Coding! icon smile ExtJS 4 File Upload + Spring MVC 3 Example

Filed in: Ext JS 4, Spring | Tags: ,

Comments (28)

Links to this Post

  1. Choosing Java Frameworks for Performance | July 29, 2011
  2. JavaPins | August 24, 2011
  1. hizsnyaig

    I’ve been getting interested in how spring can manage JS initiated “remoting”, but it’s clumsy. Check DWR instead. We use extjs/dwr/spring  for years, and it’s far better than any other similar solution

  2. jackyrong

    Hi,i download the code and run it,but get wrong,and i can not find the file which i uploaded

    • Loiane

      Hi jackyrong,
      You have to add some logic to process your file on the Controller class – store it on a dabase or write the file in a directory.
      This tutorial only shows how to do the upload, you have to do something with the file.

  3. jackyrong

    HI,THANS I’VE make the addtional code to complete the project,but when i run it on ie7,it’t show some javascript wrong,but it is find in firefox and chrome,why?

  4. jackyrong

    and the error is :in the popup windows,it said :unhandle error on page:see console or log,
    and at the button of the ie7 status bar,it showed:error:1-logged erros

  5. jackyrong

    and if you  use it in ie 7,maybe you will find it

  6. extfnewbie

    Could you have build script included as well, would help quite few new users of extjs & spring

  7. Samidha

    Hi Loiane,
    I have an application with 2 tabs.Each tab has a form and a search button which when clicked displays the grid below the form.What happens is When i click reset on tab2, tab1 search stops working in a way it fetches the data but the grid is not shown anymore.Any clue.
    Many thanks.

  8. oulei

    Hi Loiane,
    I get a error:
    “You’re trying to decode and invalid JSON String: {success:true} “

    • Loiane

      Hi oulie,
      Are you trying to execute the example above or is there something different in your code?

  9. cheetos

    Hey Loiane….your example was good…I am getting an ERROR though in Firebug…”uncaught exception: You’re trying to decode an invalid JSON String: “…I have the exact same code as posted by you…
    I tried a couple of things in vain to see if they’d work…such as adding ‘@component’ for the 2 model java classes…and adding a standardSubmit: true in the extjs for Panel…neither of these worked….please help

  10. cheetos

    Follow up on the error message….looks like its getting a 404…..here’s the full error message…

    uncaught exception: You’re trying to decode an invalid JSON String: Error 404–Not Found From RFC 2068 Hypertext Transfer Protocol — HTTP/1.1: 10.4.5 404 Not Found The server has not found anything matching the Request-URI. No indication is given of whether the condition is temporary or permanent.If the server does not wish to make this information available to the client, the status code 403 (Forbidden) can be used instead. The 410 (Gone) status code SHOULD be used if the server knows, through some internally configurable mechanism, that an old resource is permanently unavailable and has no forwarding address.

  11. cheetos

    I just downloaded your project as is and deployed it….even that’s giving the same error message…just an fyi

  12. shubhanshu shukla

    There is problem with Spring 3 and Exts 4 integration. Because in case of IE 7/8.
    File is submitting to server but it also throwing exception.
    In case of PHP it is not throwing any exception.
    check this

    http://122.160.226.254:8080/promoteIt/login.jsp
    user name shukla
    password miks
    Form containing file field thowing exception in IE but not in other browsers.

  13. There is a error in IE 6/7/8 (Exception thrown not caught)

    Here is solution : 

    Just replace controller ‘create’ function by this

     public void create(FileUploadBean uploadItem, BindingResult result,HttpServletResponse response){         ExtJSFormResult extjsFormResult = new ExtJSFormResult();         if (result.hasErrors()){            for(ObjectError error : result.getAllErrors()){                System.err.println(“Error: ” + error.getCode() +  ” – ” + error.getDefaultMessage());            }            //set extjs return – error            extjsFormResult.setSuccess(false);            response.setContentType(‘text/html’) ;
                response.getWriter().write(extjsFormResult.toString());            response.flushBuffer();             return;        }         // Some type of file processing…        System.err.println(“——————————————-”);        System.err.println(“Test upload: ” + uploadItem.getFile().getOriginalFilename());        System.err.println(“——————————————-”);         //set extjs return – sucsess        extjsFormResult.setSuccess(true);response.setContentType(‘text/html’) ;
    response.getWriter().write(extjsFormResult.toString());
    response.flushBuffer();
            return  ;  }

  14. seshu

    Good Tutorial,
    I tried & got error like unhandle error on page; but when i add in mvc-config.xml, it working

  15. seshu

    needs to be added in mvc-config.xml file

  16. seshu

    org.springframework.web.servlet.view.JstlView

  17. Majid

    Hi,
    I am new here, thank you for this tutorial, I just downloaded this example and run it in eclipse, selected a file and pressed upload, the please wait dialog box is taking forever ,never end, can you please help.
    thanks

  18. response.setContentType(“text/html”);This is right!

  19. Bobby

    Thanks Loiane, just tried it, it works like a charm.Great job.