8 Replies Latest reply on Feb 14, 2010 8:47 AM by venkatsyss

    Regarding - Image

    venkatsyss

      hi,

       

      I have uploaded the image from flex with backend server php is successsfully uploaded.I written the query in Php

       

      The query is:

       

      query="select * from tbl_image";
      $result=mysql_query($query);
      print "<users>";
      while($row=mysql_fetch_object($result)){
      print "<user>
          <img_name>".$row->img_name."</img_name>
          </user>";
      }
      print "</users>";

       

      My Question is how i will display the image in the flex.Please provide me help.

       

       

      Thanks and Regards,

      venkat.R

        • 1. Re: Regarding - Image
          Gregory Lafrance Level 6

          You now need to download the image to your Flex app and then display it.

          • 2. Re: Regarding - Image
            venkatsyss Level 1

            hi,

             

            Thanks for your reply.I moved all the files to the local server.I written the query in php however how it will display in the flex.please provide me help.

             

             

             

             

             

             

             

             

            Thanks and Regards,

            venkat.R

            • 3. Re: Regarding - Image
              jsd99 Level 3

              create an Image object either with actionscript (var foo:Image = new Image();) or making an mxml component <mx:Image> then set the source property to the URL of the image on your web server.

              • 4. Re: Regarding - Image
                venkatsyss Level 1

                hi,

                 

                Thanks for your reply.In the image table contains more than 5records and contain images.i have written the database query however,how will display in the image object.

                 

                path is the folder which contains all the images i was moved.

                 

                 

                <mx:image source =path/>

                 

                Please help me to solve the problem.

                 

                 

                Thanks and Regards,

                venkat.R

                • 5. Re: Regarding - Image
                  Flex harUI Adobe Employee

                  It will help us if you show the XML you received on the client from your php

                  query.

                  • 6. Re: Regarding - Image
                    venkatsyss Level 1

                    hi,

                     

                    Thanks for your reply.

                     

                    The following query from the database:


                    The query is:

                     

                    query="select * from tbl_image";
                    $result=mysql_query($query);
                    print "<users>";
                    while($row=mysql_fetch_object($result)){
                    print "<user>
                        <img_name>".$row->img_name."</img_name>
                        </user>";
                    }
                    print "</users>";

                     

                    My Question is how i will display the image in the flex.Please provide me help.

                     

                    Please provide me help.

                     

                     

                    Thanks and Regards,

                    venkat.R

                    • 7. Re: Regarding - Image
                      Francisc Level 3

                      The PHP script prints out:

                       

                      <users>

                           <user>

                                <img_name>Some Name 1</img_name>

                           </user>

                           <user>

                                <img_name>Some Name 2</img_name>

                           </user>

                           <user>

                                <img_name>Some Name 3</img_name>

                           </user>

                      </users>

                       

                      Venkatsyss, you need to use an HTTP service to load the XML into Flex, and in the result handler for that assign the data to an XMLListCollection or ArrayCollection or Object and set that variable as the dataProvider for the DataGrid. You also need to create an ItemRenderer with an Image container.

                       

                      It sounds complicated if you never did it before, but it isn't. Google for an example of this and you should find dozens, even the LiveDocs has examples of this.

                      • 8. Re: Regarding - Image
                        venkatsyss Level 1

                        hi,

                         

                        Thanks for you reply.

                         

                        Here the Flex script i have used to move the image.

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();userRequest.send();">
                        <mx:HTTPService id="userRequest" url="uploadFile.php" method="POST" useProxy="false">
                           
                        </mx:HTTPService>
                            <mx:Script>
                                <![CDATA[
                                    import mx.rpc.events.ResultEvent;
                               
                                    private var urlRequest:URLRequest;
                                    private var fileReferenceList:FileReferenceList;
                                    private var serverSideScript:String = "uploadFile.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;
                                        currentState="temp";
                                    }
                                   
                                ]]>
                               
                               
                            </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"/>

                         

                        The following query i have used in PHP

                         

                        <?php

                         

                        //http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tile list-control/

                         

                        //http://cookbooks.adobe.com/post_Dynamic_Images___Buttons_in_Datagrid_using_MYSQL__-8703.ht ml

                         


                        $con=mysql_connect("localhost","root","");
                        if(!$con){
                            echo "Error in Connecting Database";
                        }
                        mysql_select_db("project",$con);

                         


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

                         

                        $path="path/".$fileName;

                         

                        move_uploaded_file($tempFile,$path);

                         


                        $ins=$query=("insert into tbl_image(img_id,img_name,img_status)values('','$fileName',1)");
                        mysql_query($ins);

                         


                        $answer="select * from tbl_image";
                        $result=mysql_query($answer);
                        print "<users>";
                        while($row=mysql_fetch_object($result)){
                           
                            print "<user>
                             <img>".$row->img_name."</img>
                           
                            </user>";
                        }
                        print"</users>";
                        ?>

                         

                         

                        Here the following datagrid i have used to display the image.

                         

                        <mx:states>
                            <mx:State name="temp">
                            <mx:AddChild>
                              <mx:DataGrid x="10" y="10" width="443" height="176" dataProvider="{userRequest.lastResult.users.user}" id="dgPhoto">
                                                   <mx:columns>                         

                                                            <mx:DataGridColumn headerText="Preview" dataField="img">
                                                            <mx:itemRenderer>
                                <mx:Component>
                                <mx:VBox>
                                <mx:Image source="path/{data.img}" width="100%" height="100" horizontalAlign="center"/>
                                </mx:VBox>
                                </mx:Component>
                                </mx:itemRenderer>
                                </mx:DataGridColumn>
                            </mx:columns>
                            </mx:DataGrid>
                            </mx:AddChild>
                           
                            </mx:State>   
                            </mx:states>   
                           
                               
                        </mx:Application>

                         

                         

                        My question is,i have used current state="temp" to display the datagrid after i submit the image.But the image will not displayed in the datagrid  why because we have to refresh the page.

                         

                        Please help me to solve the problem.

                         

                        Thanks and Regards,

                        venkat.R