6 Replies Latest reply on Jul 9, 2010 3:56 AM by nirmal.kh4

    Previewing an image before uploading it using the FileReference class in flex 3

    nirmal.kh4 Level 1

      Previewing an image before uploading it using the FileReference class in flex 3 ?

        • 1. Re: Previewing an image before uploading it using the FileReference class in flex 3
          David_F57 Level 5

          hi,

           

          THe following code uses filereference class to load local images, it feeds each of the images into an arraycollection of bytearray. Its has the differenct aspects of using filereference to load and display images.

           

           

          http://gumbo.flashhub.net/pagedrop/  source included

           

           

          David.

          • 2. Re: Previewing an image before uploading it using the FileReference class in flex 3
            nirmal.kh4 Level 1

            hi,

                     the code provided is correct for flash builder 4 but i need the same code in flash builder 3.

            • 3. Re: Previewing an image before uploading it using the FileReference class in flex 3
              David_F57 Level 5

              hi,

               

              The code functionality is the same for FB3 and FB4, the main difference is with FB3 you need to set the target player to 10 to take full advantage of local filereference properties.

               

              As for the display aspect in the function below, the bytearray is the image so you can place the value straight into a mx:image or for that matter the filereference data  (fr.data)

               

                          private function getImage(e:Event): void
                          {
                              fr.removeEventListener(Event.COMPLETE, getImage);
                              if (fr.data.length > 0)
                              {
                                  var ba: ByteArray = new ByteArray();
                                  ba = fr.data;
                                  ImageCollection.addItem(ba);
                              }
                              loopList(ImageLoop);
                          }
              

              David.

              • 4. Re: Previewing an image before uploading it using the FileReference class in flex 3
                nirmal.kh4 Level 1

                hai,

                          when this code is used in my application ,i got the name of image and new frame is added each time .But image is not displayed.....

                The code  starts like this

                <?xml version="1.0" encoding="utf-8"?>

                 

                <mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                            xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init()"   backgroundColor="white" width="100%" height="100%">
                    <fx:Script>
                <![CDATA[ 

                 

                                import mx.controls.Alert;
                                import mx.messaging.Channel;
                                import mx.messaging.ChannelSet;
                                import mx.messaging.channels.AMFChannel;
                                import mx.rpc.events.ResultEvent;
                                import mx.controls.Image;
                                import spark.events.IndexChangeEvent;
                                import mx.managers.DragManager;
                ............................

                ...............................................

                .........................

                ........................

                 

                  <mx:DataGridColumn headerText="Dimension Value"  width="10" dataField="dimensionValue"/>
                                                               <mx:DataGridColumn headerText="Unit Nmae"  width="10" dataField="dimensionUnitName"/>
                                                               </mx:columns>
                                                       </mx:DataGrid>
                                                       <mx:Spacer width="2%"/>
                                                   </mx:HDividedBox>
                                                   </mx:VBox>
                               <mx:Spacer height="0"/>
                            <mx:VBox width="100%">
                                 
                                <s:HGroup height="90" top="0" left="0" right="0" verticalAlign="justify" gap="10" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5">
                                    <s:Button id="btn_loader" top="5" bottom="24" width="100" label="load" click="loadImages()"/>
                                    <s:Group width="100%">
                                        <s:Group name="cl" top="0" left="0" bottom="0" width="20" mouseOver="//scroll_on(event)" mouseOut="//scroll_off(event)">
                                            <s:BitmapImage source="@Embed('../assets/left.jpg')" top="0" left="0" bottom="0" right="0" fillMode="scale"/>   
                                        </s:Group>
                                        <s:List id="imgList" skinClass="skins.ListSkin" top="-3" left="27" right="28" bottom="10"
                                                dataProvider="{ImageCollection}" itemRenderer="Image_Render">
                                            <s:layout>
                                                <s:HorizontalLayout gap="0"/>
                                            </s:layout>
                                        </s:List>
                                        <s:Group name="cr" top="0" right="0" bottom="0" width="20" mouseOver="//scroll_on(event)" mouseOut="//scroll_off(event)">
                                            <s:BitmapImage source="@Embed('../assets/right.jpg')" top="-1" left="0" bottom="0" right="0" fillMode="scale"/>
                                        </s:Group>
                                       
                                    </s:Group>
                                </s:HGroup>
                                <s:SkinnableContainer id="dropCanvas" top="100" left="5" right="5" bottom="5" backgroundAlpha="1.0" alpha="1.0"
                                                      dragEnter="dropCanvas_dragEnterHandler(event)"
                                                      dragDrop="dropCanvas_dragDropHandler(event)" contentBackgroundColor="#914E4E" backgroundColor="#F7F7F7">
                                </s:SkinnableContainer>
                           
                            </mx:VBox>
                                                   
                            <mx:Spacer height="5"/>
                       
                                                  </mx:VDividedBox>
                   
                   
                    </mx:Panel>
                </mx:Canvas>

                • 5. Re: Previewing an image before uploading it using the FileReference class in flex 3
                  David_F57 Level 5

                  hi,

                   

                  Did you target your flex 3 application to use flashplayer 10 as the wont work with flashplayer 9 which is the default flashplayer for flexbuilder projects.

                   

                   

                  David

                  • 6. Re: Previewing an image before uploading it using the FileReference class in flex 3
                    nirmal.kh4 Level 1

                    hai,

                              my project is AIR project.........................