Skip to main content
Inspiring
Jul 16, 2019 9:23 AM UTC
Answered

CameraRoll for Android. Select Image and Display it example?

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 is closed to new replies. Start a new post to keep the conversation going.
mprabhu33
mprabhu33Correct answer
Participating Frequently
Jul 16, 2019 10:52 AM UTC

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

}

7 replies

mprabhu33
mprabhu33Correct answer
Participating Frequently
Jul 16, 2019 10:52 AM UTC

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

}

Translate
Leo KanelAuthor
Inspiring
Jul 18, 2019 7:04 AM UTC

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?

Translate
mprabhu33
Participating Frequently
Jul 18, 2019 7:48 AM UTC

Yes, will work both android and iOS.

Translate