File Upload in Flex4

Example: Upload files to Rails server

• User want to upload images to /upload folder on the server and saves the path of each image on the database.
• Assume the database has table called images which has an attribute called path.

1- Upload Form

• FileReference is a class which allows you to upload/download to/from a server.
• Each FileReference object refers to a single file on the user's disk.
• browse() method allows a user to select one or more files.
• FileReferenceList can be used when the user need to select multiple files.
• For more details click here.

<s:Button x="10" y="14" label="Upload" id="uploadButton" click="openUploadForm()"/>

private function openUploadForm():void

	{

		var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");

		var allTypes:Array = new Array(imageTypes);

		fileRefList = new FileReferenceList();

		fileRefList.addEventListener(Event.SELECT, selectHandler);

		fileRefList.addEventListener(Event.COMPLETE, completeHandler);

		fileRefList.addEventListener(IOErrorEvent.IO_ERROR, onIOError);

		try

		{

			var success:Boolean = fileRefList.browse(allTypes);

		}

		catch (error:Error)

		{

			trace("Unable to browse files.");

		}

	}

2- Form Request

	//called when file selection is done

	public function selectHandler(event:Event):void

	{				

		var request:URLRequest = new URLRequest("http://{Server URL}/images/upload");

		request.method = URLRequestMethod.POST;

		

		var list:Array = fileRefList.fileList;

		var fileRef:FileReference;

	

		for(var i:Number = 0; i < list.length; i++)

		{

			fileRef = list[i];

			fileRef.addEventListener(Event.COMPLETE, completeHandler);

			fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, responseHandler);

			trace("name: " + fileRef.name);

			try

			{

				fileRef.upload(request);

			}

			catch (error:Error)

			{

				trace("Unable to upload file.");

			}					

		}

	}



	//called when upload is completed

	private function completeHandler(event:Event):void

	{

		trace("uploaded !!!");

	}

3-Handle Request from Rails

	def upload

		name = params[:Filename]

	  	directory = "public/uploads"

	  	path = File.join(directory, name)

	  	File.open(path, "wb") { |f| f.write(params[:Filedata].read) }

	  	newPath = File.join("/uploads", name);

	  	@image = Image.new(:path => newPath)

	  	respond_to do |format|

	  		if @image.save

		  	format.xml #upload.rxml

	  		else

	  		format.xml { render :xml => @image.errors, :status => :unprocessable_entity }

			end

		end

	end

Upload.rxml

		xml.instruct!

		xml.images do

	  		xml.image_path @image.path

		end

4- Handle Response from Flex

	private function responseHandler(event:DataEvent) :void

	{

		var images:XML = XML(event.data); //parse response

		var image:ImageClass = new ImageClass(images.image_path[0]);

		//continue handling response ...	

	

Possible Errors

"Error #2044: Unhandled IOErrorEvent:. text=Error #2038: File I/O Error."

it may happen when the response format doesn't handled,

in our example we are only handling html and xml responses, So this error my happen

if the response format specified in the request is anything except (html) or (xml)

it can be handled by specifying the format to be "xml"

	var request:URLRequest = new URLRequest("http://{Server URL}/images/upload?format=xml");

	request.method = URLRequestMethod.POST;