Skip to main content
Inspiring
July 16, 2019
Answered

CameraRoll for Android. Select Image and Display it example?

  • July 16, 2019
  • 1 reply
  • 1141 views

I am trying to make a simple app which allows the user to select an image from CameraRoll and then display it in an <s:Image/> on Flex, but all the tutorials and example code, is very old.

I managed to get the cameraroll working with permissions, select the image, but then I can't display it in and Image object.

Any one has an updated sample?

This topic has been closed for replies.
Correct answer mprabhu33

Please find the below working code to browse and display image.

private var camRoll:CameraRoll;

private var dataSource:IDataInput;

private var eventSource:IEventDispatcher;

private var mediaPromise:MediaPromise;

private function initCameraRoll():void

{

trace("ATTACH: Init...");

camRoll = new CameraRoll();

if( CameraRoll.supportsBrowseForImage )

{

if(CameraRoll.permissionStatus != PermissionStatus.GRANTED)

{

camRoll.addEventListener(PermissionEvent.PERMISSION_STATUS, function(e:PermissionEvent):void {

if (e.status == PermissionStatus.GRANTED)

{

trace("ATTACH: Permission granted");

connectCameraRoll();

}

else

{

trace("ATTACH: Permission Denied");

}

});

try {

trace("ATTACH: Request Camera Roll Permission");

camRoll.requestPermission();

} catch(e:Error)

{

trace("ATTACH: Another Request InProgress");

}

}else

{

trace("ATTACH: Permission granted");

connectCameraRoll();

}

}

else

{

trace("ATTACH: File browse not support")

}

}

private function connectCameraRoll():void

{

trace("ATTACH: Connect Camera Roll");

camRoll.addEventListener( MediaEvent.SELECT, mediaSelected );

camRoll.addEventListener( Event.CANCEL, browseCanceled );

camRoll.addEventListener( ErrorEvent.ERROR, mediaError );

camRoll.browseForImage();

}

private function mediaSelected( event:MediaEvent ):void

{

mediaPromise = event.data;

dataSource = mediaPromise.open();

trace("ATTACH: Media selected..."+mediaPromise.isAsync+":"+mediaPromise.file);

if( mediaPromise.isAsync )

{

eventSource = dataSource as IEventDispatcher;           

eventSource.addEventListener( Event.COMPLETE, onMediaLoaded );        

} else

{

readMediaData();

}

}

private function onMediaLoaded( event:Event ):void

{

readMediaData();

}

private function readMediaData():void

{

trace("ATTACH: Read Media..."+mediaPromise.relativePath+":"+mediaPromise.file);

var imageBytes:ByteArray = new ByteArray();

dataSource.readBytes(imageBytes);

//Load image byte array to your Image Object

yourImagaeObject.source = imageBytes;

}

private function browseCanceled( event:Event ):void

{

trace("ATTACH: Media cancelled...");

}

private function mediaError (e:ErrorEvent):void

{

trace("ATTACH: Media error..."+e.text);

}

1 reply

mprabhu33
mprabhu33Correct answer
Participating Frequently
July 16, 2019

Please find the below working code to browse and display image.

private var camRoll:CameraRoll;

private var dataSource:IDataInput;

private var eventSource:IEventDispatcher;

private var mediaPromise:MediaPromise;

private function initCameraRoll():void

{

trace("ATTACH: Init...");

camRoll = new CameraRoll();

if( CameraRoll.supportsBrowseForImage )

{

if(CameraRoll.permissionStatus != PermissionStatus.GRANTED)

{

camRoll.addEventListener(PermissionEvent.PERMISSION_STATUS, function(e:PermissionEvent):void {

if (e.status == PermissionStatus.GRANTED)

{

trace("ATTACH: Permission granted");

connectCameraRoll();

}

else

{

trace("ATTACH: Permission Denied");

}

});

try {

trace("ATTACH: Request Camera Roll Permission");

camRoll.requestPermission();

} catch(e:Error)

{

trace("ATTACH: Another Request InProgress");

}

}else

{

trace("ATTACH: Permission granted");

connectCameraRoll();

}

}

else

{

trace("ATTACH: File browse not support")

}

}

private function connectCameraRoll():void

{

trace("ATTACH: Connect Camera Roll");

camRoll.addEventListener( MediaEvent.SELECT, mediaSelected );

camRoll.addEventListener( Event.CANCEL, browseCanceled );

camRoll.addEventListener( ErrorEvent.ERROR, mediaError );

camRoll.browseForImage();

}

private function mediaSelected( event:MediaEvent ):void

{

mediaPromise = event.data;

dataSource = mediaPromise.open();

trace("ATTACH: Media selected..."+mediaPromise.isAsync+":"+mediaPromise.file);

if( mediaPromise.isAsync )

{

eventSource = dataSource as IEventDispatcher;           

eventSource.addEventListener( Event.COMPLETE, onMediaLoaded );        

} else

{

readMediaData();

}

}

private function onMediaLoaded( event:Event ):void

{

readMediaData();

}

private function readMediaData():void

{

trace("ATTACH: Read Media..."+mediaPromise.relativePath+":"+mediaPromise.file);

var imageBytes:ByteArray = new ByteArray();

dataSource.readBytes(imageBytes);

//Load image byte array to your Image Object

yourImagaeObject.source = imageBytes;

}

private function browseCanceled( event:Event ):void

{

trace("ATTACH: Media cancelled...");

}

private function mediaError (e:ErrorEvent):void

{

trace("ATTACH: Media error..."+e.text);

}

Leo KanelAuthor
Inspiring
July 18, 2019

Thank you. This worked like a charm. It looks like I didn't have the dataSource.readBytes(imageBytes); on my code and that caused both the display image and my upload to server to fail.

Does this code also work for iOS?

mprabhu33
Participating Frequently
July 18, 2019

Yes, will work both android and iOS.