7 Replies Latest reply on Jun 24, 2011 9:14 AM by guidamergulhao@gmail.com

    Problem Displaying Images in a Datagrid Loaded from Local Files

    yyterrwihbgd

      Hi,

      I'm trying to get images (loaded from the local filesystem) to display in a datagrid.

       

      the file paths are fine, but no images are displayed in the datagrid (I'm using an Air based project, AS3).

       

      Datagrid code is:

       

            <mx:DataGrid id="dg"  dataProvider="{myArrayCollection}">

              <mx:columns>

                <mx:DataGridColumn headerText="Image"  width="100">

                </mx:DataGridColumn>

              </mx:columns>

            </mx:DataGrid>

       

      The Actionscript code is:

       

       

               

                fileStream = new FileStream();       

               

                var imageBytes:ByteArray = new ByteArray();

                var stream:FileStream = new FileStream();

               

                array7 = new Array();

               

                for (var j:int=0; j<fileList1.length; j++)

                {           

                  var file1:File = File.desktopDirectory; 

                  file1 = new File();

                  file1 = File.desktopDirectory.resolvePath("DG_TEST/" + fileList1[j].name);

                  fileStream = new FileStream();

                  stream.open(file1, FileMode.READ);

                  stream.readBytes(imageBytes);

                  stream.close();

                  array7.push(imageBytes);

                  //array7.push(j);

                }

                     

                myArrayCollection.source = array7;

       

      I also have:         [Bindable] private var myArrayCollection:ArrayCollection = new ArrayCollection();

       

      If I uncomment the line array7.push(j), the numbers show in the datagrid and seem to leave a line for the images?

       

      Any ideas/code changes (preferred as I am very recent to flex/Air) to help me display the images in the datagrid would be greatly appreciated.

       

      Thanks in advance,

      Guida

        • 1. Re: Problem Displaying Images in a Datagrid Loaded from Local Files
          eprevot123 Level 2

          if your datagrid has only one column (then maybe you could use a List), you can put the path of the image in the ArrayCollection :

          myArrayCollection.addItem(imagePath);

           

           

          Then in the datagridColumn you set an itemRenderer with

          <s:itemRenderer>

                  <fx:Component>

                      <s:ItemRenderer>

                          <s:Image source="{data}"

                      </s:ItemRenderer>

                  </fx:Component>

              </s:itemRenderer>

          • 2. Re: Problem Displaying Images in a Datagrid Loaded from Local Files
            guidamergulhao@gmail.com

            Thanks for your idea.

             

            I believe your idea is an easier one to implement (although there will be other columns, hence the datagrid).

             

            I have the following datagrid code:

             

             

                  <mx:DataGrid id="dg">

                    <mx:columns>

                      <mx:DataGridColumn headerText="Image"  dataField="Image" width="150">

                        <mx:itemRenderer>

                          <fx:Component>

                            <s:ItemRenderer>

                              <s:Image source="{myArrayCollection}" />

                            </s:ItemRenderer>

                          </fx:Component>

                        </mx:itemRenderer>

                      </mx:DataGridColumn>

                    </mx:columns>

                  </mx:DataGrid>

             

            and AS3 code is:

             

                     for (var j:int=0; j<fileList1.length; j++)

                      {           

                       

                       

                        var file1:File = File.desktopDirectory; 

                        file1 = new File();

                        file1 = File.desktopDirectory.resolvePath("DG_TEST/" + fileList1[j].name);

                        fileStream = new FileStream();

                        stream.open(file1, FileMode.READ);

                        stream.readBytes(imageBytes);

                        stream.close();

                        array7.push(imageBytes);

                        //array7.push(j);

                         


                        myArrayCollection.addItem(fileList1[j].nativePath);

                       

                        trace("Path is: " + fileList1[j].nativePath);

                        trace("myArrayCollection: " + myArrayCollection);

                      }

             

            The trace output is:

            Path is: /Users/gm/Desktop/DG_TEST/gm_20110617_163939742.jpg

            myArrayCollection: /Users/gm/Desktop/DG_TEST/gm_20110617_163939742.jpg

            Path is: /Users/gm/Desktop/DG_TEST/gm_20110617_163913458.jpg

            myArrayCollection: /Users/gm/Desktop/DG_TEST/gm_20110617_163939742.jpg,/Users/gm/Desktop/DG_TEST/gm_20110617 _163913458.jpg

            Path is: /Users/gm/Desktop/DG_TEST/gm_20110617_163901046.jpg

            myArrayCollection: /Users/gm/Desktop/DG_TEST/gm_20110617_163939742.jpg,/Users/gm/Desktop/DG_TEST/gm_20110617 _163913458.jpg,/Users/gm/Desktop/DG_TEST/gm_20110617_163901046.jpg

             

            So the path is correct, but I cannot use                  

            <s:Image source="{outerDocument.myArrayCollection}" />

            or

            <s:Image source="{myArrayCollection}" />

             

            as I get compile errors (I used a dummy variable instead to get it run, so I couldt est the variables:-(

             

            What should I use in the source?

             

            GM

             

            • 3. Re: Problem Displaying Images in a Datagrid Loaded from Local Files
              eprevot123 Level 2

              the ArrayCollection is to be set as the dataprovider of the datagrid, and the itemRenderer uses its "data" variable to render each item of the dataprovider.

              If you have several columns, the dataprovider could be an ArrayCollection of objects that have a property "imagePath" and the renderer would contain :

              <s:BitmapImage source="{data.imagePath}">

               

              or if your dataprovider is an arraycollection of File :

              <s:BitmapImage source="{data.nativePath}">

              • 4. Re: Problem Displaying Images in a Datagrid Loaded from Local Files
                guidamergulhao@gmail.com Level 1

                Thanks again for your response.

                 

                I have changed my arraycollection to:

                 

                myArrayCollection.addItem("image:" + fileList1[j].nativePath);

                 

                and my datagrid to:

                 

                           <mx:itemRenderer>

                              <fx:Component>

                                  <mx:Image source="{data.image}" />

                              </fx:Component>

                            </mx:itemRenderer>

                 

                The datagrid show the three rows for the 3 jpg files and the paths are correct

                (eg  /Users/gm/Desktop/DG_TEST/gm_20110617_163939742.jpg  ).

                 

                However the image is not shown, but a broken image, indicating the path is incorrect?

                 

                Any ideas on why this should be?

                 

                THX again:-)

                • 5. Re: Problem Displaying Images in a Datagrid Loaded from Local Files
                  eprevot123 Level 2

                  I think the image is broken because the path should start with "file://"

                   

                  And there is something I don't understand : each itemRenderer of the datagrid displays an item of the dataprovider, its property "data" will be an item of the dataprovider. So here, data will be a String "image:file:///Users/blablabla/image.png" and does not have an "image" property. Are you sure {data.image} is the path you expect ?

                  where do you check the path to know if it's correct ?

                  you should add a debug break point on the Image to check data.image is the good path

                  1 person found this helpful
                  • 6. Re: Problem Displaying Images in a Datagrid Loaded from Local Files
                    guidamergulhao@gmail.com Level 1

                    Ah, you are of course correct.

                    I needed

                     

                    myArrayCollection.addItem("file://" + fileList1[j].nativePath);

                    and
                    <mx:Image source="{data}" />

                     

                    Thanks for your patience in helping me with this.

                     

                    G


                    1 person found this helpful
                    • 7. Re: Problem Displaying Images in a Datagrid Loaded from Local Files
                      eprevot123 Level 2

                      you're welcome

                      don't forget to put the discussion as "answered" to close it