Displaying an image in flex

Question

How to browse an image from my local disk and display it in a
text area in flex

Answer 1

i have writen the code for the uploading of images,the images
first get displayed in the text area and then after clicking the
"button" to display the images in the tile list component but
somehow the tile list takes the path of the image rather than the
actual image....plz help
mxml code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init();" initialize="initData();" width="100%"
height="100%">
<mx:HTTPService id="userRequest" url="
http://localhost/mixbook/return.php"
useProxy="false" method="POST">
<mx:request xmlns="">
</mx:request>
</mx:HTTPService>
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.collections.ArrayCollection;
private var urlRequest:URLRequest;
private var fileReferenceList:FileReferenceList;
private var serverSideScript:String = "
http://localhost/mixbook/upload_image.php";
[Bindable]
public var TileListdp:ArrayCollection;
private var myArray:Array = new Array;
import mx.collections.ArrayCollection;
import mx.controls.TileList;
private function init():void
urlRequest = new URLRequest(serverSideScript);
fileReferenceList = new FileReferenceList();
fileReferenceList.addEventListener(Event.SELECT,
fileSelectedHandler);
private function uploadFile():void
fileReferenceList.browse();
private function fileSelectedHandler(event:Event):void
var fileReference:FileReference;
var fileReferenceList:FileReferenceList =
FileReferenceList(event.target);
var fileList:Array = fileReferenceList.fileList;
// get the first file that the user chose
fileReference = FileReference(fileList[0]);
// upload the file to the server side script
fileReference.addEventListener(Event.COMPLETE,
uploadCompleteHandler);
fileReference.upload(urlRequest);
// update the status text
statusText.text = "Uploading...";
private function uploadCompleteHandler(event:Event):void
statusText.text = "File Uploaded: " + event.target.name;
var file:FileReference = FileReference(event.target);
//var file:FileReference ;
outputTextArea.htmlText = "<img src='C:\\" + (file.name)
+ "'/>";
//myArray.push(outputTextArea.htmlText);
myArray.push("<img src='C:\\" + (file.name) + "'/>");
trace(outputTextArea.htmlText);
public function dodo():void
var image1:Image = new Image;
image1.source = outputTextArea.htmlText;
// myArray.push(outputTextArea.htmlText).valueOf();
// myArray.push(image1.source);
TileListdp.source = myArray;
image1.source =TileListdp.source;
//TileListdp.source = image1.data;
private function initData():void
TileListdp = new ArrayCollection();
]]>
</mx:Script>
<mx:Label text="Upload File From Flex to PHP"
fontWeight="bold"/>
<mx:Label text="Choose a file..." id="statusText"/>
<mx:Button click="uploadFile();" label="Upload File"/>
<mx:TileList x="195" y="10" width="532"
dataProvider="{TileListdp}"
height="207" id="myList" rowHeight="20" columnCount="1"
labelField="thumbnail" render="mx.controls.Image"
variableRowHeight="true" visible="true" wordWrap="true"
includeInLayout="true" direction="vertical" enabled="true">
</mx:TileList>
<mx:TextArea height="244" id="outputTextArea"
width="248"/>
<mx:Button label="Button" click="dodo();"/>
</mx:Application>
php code
<?php
$tempFile = $_FILES['Filedata']['tmp_name'];
$fileName = $_FILES['Filedata']['name'];
$fileSize = $_FILES['Filedata']['size'];
$fp = fopen("test.txt","a+");
fwrite($fp,$fileName."\r\n");
move_uploaded_file($tempFile, 'C:\\' . $fileName);
?>
<!--<script type="text/javascript"
language="javascript">window.location='C:\Documents and
Settings\Manohar\My Documents\Flex Builder
3\sample\bin-debug\dload.html'</script>-->