Single File Upload From Flex To Ruby On Rails

Single File Upload From Flex To Ruby On Rails

Here is an very simple example to know how can we upload single file(Image) from flex to Ruby On Rails(ROR).

Flex: uploadFile.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”100%” height=”24″
creationComplete=”uploadInit();”   borderColor=”#CCCCCC” backgroundColor=”white”  verticalAlign=”middle”  >

<mx:Script>
<![CDATA[
import mx.controls.Alert;
// VARS FOR BROWSE AND UPLOAD IMAGES
private var fileRef:FileReference;
private var _uploadURL:URLRequest;
private var _variables:URLVariables;

// Here uploadImage is a Controller Name and index is a method //name
private const FILE_UPLOAD_URL:String = "/uploadImage/index";

// This filter to allow user to upload only jpg,jpeg,gif,png,eps and tif images

//This is optional, to upload all type of files need not use filter
public var imageTypes:FileFilter = new FileFilter("Images (*.jpg; *.jpeg; *.gif; *.png;*.eps;*.tif)" ,"*.jpg; *.jpeg; *.gif; *.png;*.eps;*.tif");
public var filesToFilter:Array = new Array(imageTypes);
private function uploadInit():void {
fileRef = new FileReference();
fileRef.addEventListener(Event.SELECT, fileRef_select);
fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
fileRef.addEventListener(Event.COMPLETE, fileRef_complete);

_uploadURL = new URLRequest;
_uploadURL.url = "/uploadImage/index";
_uploadURL.method = "POST";
_uploadURL.contentType = "multipart/form-data";
}

private function browseAndUpload():void {
fileRef.browse(filesToFilter);

// To allow any type of file to upload below line only

//  fileRef.browse();

}

private function fileRef_select(evt:Event):void {
try {

_variables = new URLVariables();

// URLVariables to send additional data with uploaded file

//like         _variables.user_session_id='111';
_uploadURL.data=_variables;
fileRef.upload(_uploadURL);   // Upload Image here
} catch (err:Error) {
// thxtMessage.text = "ERROR: zero-byte file";
}
}

private function fileRef_progress(evt:ProgressEvent):void {
progressbar.visible = true;
thxtMessage.visible=false;
progressbar.setProgress(evt.bytesLoaded,evt.bytesTotal);
}

private function fileRef_complete(evt:Event):void {
// message.text += " (complete)";
progressbar.visible = false;
thxtMessage.visible=true;
}
]]>
</mx:Script>

<mx:HBox width=”100%” horizontalAlign=”left”  borderColor=”#CCCCCC” horizontalGap=”0″>
<mx:Button id=”browseBTN” label=”browse” click=”browseAndUpload();”  x=”0″  y=”0″/>
<mx:Canvas width=”100%” >
<mx:Text id=”thxtMessage” textAlign=”center” width=”100%” color=”green” visible=”false” text=”Image Uploaded Successfully” fontWeight=”bold”   y=”3″/>
<mx:ProgressBar id=”progressbar” width=”100%” mode=”manual” visible=”false” borderColor=”gray” fontWeight=”bold”  color=”black”   labelPlacement=”center”
trackHeight=”1″ y=”2″  height=”20″ label=”%1 of Bytes %2 (%3%%)” />
</mx:Canvas>
</mx:HBox>

ROR:

uploadImage.rb(Controller)

def index

data = params[:Filedata] #  uploaded file
name = params[:Filename] # name of  uploaded  file

# folder name uploads in public to store  images/files here

directory = ‘public/uploads’

@data_file = DataFile.save_file(data, name, directory)

//DataFile is a model

render :nothing => true

end

datafile.rb (Model)

def self.save_file(data, name, directory)
# create the file path
path = File.join(directory, name)
# write the file
File.open(path,‘wb’) do |file|
file.puts data.read
end
end

U can see the uploaded file in public->uploads folder