20 Replies Latest reply on Jul 17, 2008 11:44 PM by Shri1

    displaying an image in flex

    nitsmooth Level 1
      How to browse an image from my local disk and display it in a text area in flex
        • 1. Re: displaying an image in flex
          Karl_Sigiscar_1971 Level 3

          Use the FileReference (flash.net.FileReference) to get the URL to the local image:
          http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Liv eDocs_Parts&file=00001656.html

          Get a URL from this.

          You can use the <image src=""> tag in the text you feed the htmlText property with in the TextArea:

          <mx:TextArea>

          <mx:htmlText>
          <![CDATA[
          <!-- Paste your HTML here -->
          ]]>
          </mx:htmlText>

          </mx:TextArea>
          • 2. Re: displaying an image in flex
            nitsmooth Level 1
            actually i have a flex page and i want to have a browse button on my flex page which browses the file from my local system and displays it on the same flex page may be in a mage component....i dont think i need to upload the image first to do that
            • 3. displaying an image in flex
              Karl_Sigiscar_1971 Level 3
              No, indeed. You do not need to upload the file first. I pointed you to the FileReference class because that's the only way you can let the user browse the file system in order to get a reference to a file if you use Flash Player and not AIR.
              • 4. Re: displaying an image in flex
                nitsmooth Level 1
                pardon me if i m asking very basic questions ...actually i m new to flex....as u said i have implemented the code for uploading the image...i have uploaded it to localhost....now how can i display the image on my flex page (may be in a image component)...and also i could not understand what u were saying about flash player...are we supposed to use flash player?and how?
                • 5. displaying an image in flex
                  Karl_Sigiscar_1971 Level 3
                  Hi, here is a working example I created for you. As you can see, you do not need to upload the image. You just use FileReference to get a reference to the file you want to display in the TextArea. The only drawback of the method is that the user can only choose the file from the same place. In the example I created, from the My Pictures folder of my account. The full path to the file is hidden by Flash Player and there is no way to get it. So you have to make an assumption as to where the file is and tell the user to choose the file from there only. If you want more flexibility than what the FileReference class offers, you can use the AIR specific APIs. Flash Player is used to create web applications that run in the browser. AIR is used to create desktop applications that run on the desktop. AIR has all the Flash Player APIs + some more that are specific.

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="this.onApplicationComplete()">

                  <mx:Script>
                  <![CDATA[

                  import flash.display.Sprite;
                  import flash.events.*;
                  import flash.net.FileFilter;
                  import flash.net.FileReference;
                  import flash.net.URLRequest;


                  private var file:FileReference;


                  private function onApplicationComplete():void
                  {
                  file = new FileReference();
                  configureListeners(file);
                  }

                  private function configureListeners(dispatcher:IEventDispatcher):void
                  {
                  dispatcher.addEventListener(Event.SELECT, selectHandler);
                  }

                  private function selectHandler(event:Event):void
                  {
                  var file:FileReference = FileReference(event.target);
                  outputTextArea.htmlText = "<img src='C:\\Documents%20and%20Settings\\k.sigiscar\\My%20Documents\\My%20Pictures\\" + (file.name) + "'/>";
                  trace(outputTextArea.htmlText);
                  }
                  ]]>
                  </mx:Script>

                  <mx:Button
                  label="Select a file"
                  horizontalCenter="0"
                  bottom="10"
                  click="file.browse();">
                  </mx:Button>

                  <mx:TextArea id="outputTextArea"
                  width="100%"
                  height="90%">
                  </mx:TextArea>

                  </mx:Application>
                  • 6. Re: displaying an image in flex
                    nitsmooth Level 1
                    thanks man the code u gave works like a charm......thanks very much !!!
                    • 7. Re: displaying an image in flex
                      nitsmooth Level 1
                      cant we get the picture from any path rather than the one we specify in
                      img src=


                      actually i have to make a clone of mixbook.com and in that it takes any path from my local system and uploads the picture on the site

                      also since i have just started working on flex so could u give me some tips on how to start learning the language
                      • 8. Re: displaying an image in flex
                        Karl_Sigiscar_1971 Level 3

                        Then you will have to use the File class in the AIR APIs and your application will run on the desktop, not in the browser.

                        The full path to the file is hidden by Flash Player and there is no way to get it. This is a security restriction of the Flash Player sandbox.

                        • 9. Re: displaying an image in flex
                          nitsmooth Level 1
                          Ok that means i have to download the AIR utility first to allow taking any path for uploading the image but it woulld be a desktop application then as u said ?.... but then how does it happen in the site mixbook as the site runs in a browser only and allows to upload the image from any path on my local system
                          • 10. Re: displaying an image in flex
                            Karl_Sigiscar_1971 Level 3

                            Yes, but mixbook or Photoshop Express allow you to UPLOAD the file. In that case too, they use the FileRefence class and the developer does not see the path because:

                            1- It is hidden by Flash Player
                            2- You do not need to know the path to the file to upload it to the server. Only Flash Player knows the full path.

                            In your case, you want to display the image selected from the file system without uploading it first. So, you definitely need the path to the image on your local system.
                            • 11. Re: displaying an image in flex
                              nitsmooth Level 1
                              sample1.mxml sends a request to upload.php to upload the file to the localhost and upload.php is doing that

                              sample1.mxml
                              -------------------------
                              <?xml version="1.0" encoding="utf-8"?>
                              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init();">
                              <mx:Script>
                              <![CDATA[

                              private var urlRequest:URLRequest;
                              private var fileReferenceList:FileReferenceList;
                              private var serverSideScript:String = " http://localhost/upload.php";

                              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;
                              }

                              ]]>
                              </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:Application>

                              ------------------------------------------------------------------------------------------ --------------

                              upload.php

                              <?php

                              $tempFile = $_FILES['Filedata']['tmp_name'];
                              $fileName = $_FILES['Filedata']['name'];
                              $fileSize = $_FILES['Filedata']['size'];

                              move_uploaded_file($tempFile, "./" . $fileName);

                              ?>

                              Loads the image to localhost directory as i said earlier



                              Now your code u gave to me
                              dload.mxml
                              ----------------
                              <?xml version="1.0" encoding="utf-8"?>
                              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="this.onApplicationComplete()">

                              <mx:Script>
                              <![CDATA[

                              import flash.display.Sprite;
                              import flash.events.*;
                              import flash.net.FileFilter;
                              import flash.net.FileReference;
                              import flash.net.URLRequest;


                              private var file:FileReference;


                              private function onApplicationComplete():void
                              {
                              file = new FileReference();
                              configureListeners(file);
                              }

                              private function configureListeners(dispatcher:IEventDispatcher):void
                              {
                              dispatcher.addEventListener(Event.SELECT, selectHandler);
                              }

                              private function selectHandler(event:Event):void
                              {
                              var file:FileReference = FileReference(event.target);
                              outputTextArea.htmlText = "<img src='http:\\localhost\\" + (file.name) + "'/>";
                              trace(outputTextArea.htmlText);
                              }
                              ]]>
                              </mx:Script>

                              <mx:Button
                              label="Browse"
                              horizontalCenter="-24"
                              bottom="91"
                              click="file.browse();">
                              </mx:Button>

                              <mx:TextArea id="outputTextArea"
                              width="793"
                              height="583" x="0" y="0" >
                              </mx:TextArea>

                              </mx:Application>


                              cannot i use the uploaded $filename in "img src=" in dload.mxml

                              "<img src='http:\\localhost\\" + ($filename) + "'/>";


                              also how do i send the file name ($filename) from upload.php to dload.mxml

                              Do you think this code will work if yes plz tell the modifications if needed
                              • 12. Re: displaying an image in flex
                                nitsmooth Level 1
                                Karl just tell me one more thing i was reading some blogs and it said that using air it was not even necessary to upload the images from the users local system ..... air can let the user just drag and drop the images from the desktop to the application... is that so...


                                "This application would be great as an AIR application. Adobe AIR would add the ability to drag and drop photos directly from the desktop into the application, without having to upload the photos to Mixbook's servers."


                                • 13. Re: displaying an image in flex
                                  Karl_Sigiscar_1971 Level 3

                                  Yes it is possible.

                                  For example, Alan Queen in Atlanta developed an AIR application about sound that lets you drag'n'drop sound files from the desktop.

                                  That's possible too with images. And that's the power of AIR. Your application is integrated with the desktop and interacts with it.
                                  • 14. Re: displaying an image in flex
                                    nitsmooth Level 1
                                    karl plz read the third last post i had asked another question there
                                    • 15. displaying an image in flex
                                      Karl_Sigiscar_1971 Level 3
                                      $filename is a PHP variable. It cannot be used in ActionScript.

                                      If you upload files to a PHP script, you need to have some kind of reference to them. This would be done in the PHP script that you call when you upload the file.

                                      Most often, you will have an entry for each file in a database. Each record contains the image ID, its description, some keywords and its path in the server file system to the actual PNG/JPEG/GIF file.

                                      When your application starts, you want to call a PHP script that reads the database and e.g pulls all the images available for a given user (as in Photoshop Express) and you want to feed this data to a TileList in Flex.

                                      When the user clicks on an item in the TileList, you use the image path in the item object to change the htmlText property of the TextArea.

                                      • 16. Re: displaying an image in flex
                                        nitsmooth Level 1
                                        r u telling me that there is no way we can send some data from a php page to a mxml page and use it in the mxml page.....there has got be some way man
                                        • 17. Re: displaying an image in flex
                                          Gregory Lafrance Level 6
                                          I think you can "request" data from a PHP page, but you may have to process that data appropriately in Flex depending the type of data it is. For example you might need to set the resultFormat property of your HTTPService object.

                                          • 18. Re: displaying an image in flex
                                            Karl_Sigiscar_1971 Level 3

                                            Of course there is a way.

                                            The upload.php script could do three things:

                                            1- Save the file to the server file system
                                            2- Insert a record in the database about the file
                                            3- Send back the URL to the image to the client

                                            In your HTTP result handler, you simply read the URL and use it to display the image immediately.
                                            • 19. Re: displaying an image in flex
                                              nitsmooth Level 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>-->
                                              • 20. Re: displaying an image in flex
                                                Shri1 Level 1
                                                Hi friend,
                                                This is great ode.
                                                I added image in RichtextEditor's text area.
                                                But I am facing problem to add image in between text.

                                                Please give me solution on same.

                                                -Shrish