Flex4: How to Upload File to Servlet (Part I)

1. Flex

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   creationComplete="initApp(event)"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.CloseEvent;
			import mx.managers.CursorManager;
			[Bindable]
			private var fileRefText:String;
			private const FILE_UPLOAD_URL:String = "http://localhost:8080/FileUpload/FileUploadServlet";
			private var fileRef:FileReference = new FileReference();
			private function initApp(event:Event):void
			{
				fileRef.addEventListener(Event.SELECT, onFileSelect);
				fileRef.addEventListener(ProgressEvent.PROGRESS, onProgress);
				fileRef.addEventListener(Event.COMPLETE, onFileUploadComplete);
			}
			private function browse(e:Event):void
			{
				fileRef.browse([new FileFilter("FlatFile", "*.rar")]);
			}
			private function onFileSelect(e:Event):void
			{
				Alert.show("Upload: " + fileRef.name + ", size: " + Math.round(fileRef.size) + " byte ?", "Upload", Alert.YES|Alert.NO, null, proceedWithUpload);
			}
			private function onFileUploadComplete(e:Event):void
			{
				CursorManager.removeBusyCursor();
				Alert.show("File upload completed!");
			}
			private function proceedWithUpload(e:CloseEvent):void
			{
				if(Alert.YES == e.detail)
				{
					CursorManager.setBusyCursor();
					try
					{
						var urlRequest:URLRequest = new URLRequest();
						urlRequest.url = FILE_UPLOAD_URL;
						urlRequest.method = URLRequestMethod.POST;
						
						fileRef.upload(urlRequest);
					}
					catch(error:Error)
					{
						CursorManager.removeBusyCursor();
						Alert.show("Error occured during upload!");
					}
				}
			}
			private function onProgress(e:ProgressEvent):void
			{
				var proc:uint = (e.bytesLoaded / e.bytesTotal) * 100;
				progressBar.label = "Current: " + proc + "%";
			}
		]]>
	</fx:Script>
	<s:VGroup>
		<s:HGroup>
			<s:TextInput text="{fileRefText}"/>
			<s:Button label="Browse" click="browse(event)"/>
		</s:HGroup>
		<mx:ProgressBar id="progressBar" label="Current: 0%" mode="manual"/> 
	</s:VGroup>
	
</s:Application>

 

2. Server

    1) web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
  	<servlet-name>FileUploadServlet</servlet-name>
  	<servlet-class>edu.xmu.servlet.FileUploadServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>FileUploadServlet</servlet-name>
  	<url-pattern>/FileUploadServlet</url-pattern>
  </servlet-mapping>
</web-app>

    2) FileUploadServlet.java

package edu.xmu.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FileUploadServlet extends HttpServlet
{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		// TODO Auto-generated method stub
		System.out.println("doGet");
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		// TODO Auto-generated method stub
		System.out.println("doPost");
	}
}

3. Tomcat Config

    1) Tomcat dir: D:\Program Files\Tomcat 6.0\conf\server.xml

         Pay attention to <Context docBase="..." path="..." reloadable="true">, the "C" in <Context> is in upper case!

    2) Embed Tomcat into MyEclipse

 

4. Start server -> Upload File from Flex -> All done!

 

Comments:

    1) Have to add crossdomain.xml in tomcat root folder: D:\Program Files\Tomcat 6.0\webapps\ROOT

<?xml version="1.0"?>
<cross-domain-policy>
    <allow-access-from domain="*" />
</cross-domain-policy>

    2) Use FireBug track request from flex, we sometimes got error 405 as below: Delete super.doPost(req, resp); or super.doGet(req, resp); in Servlet!