Flex has a lot to offer when it comes to file manipulation and viewing/interaction. The AIR environment is perfect for an “explorer” type application.

Here’s a quick file browser in Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1044" height="800" currentState="videoState" creationComplete="init()">
	<mx:Style source="assets/css/styles.css" />
	<mx:Script>
		<![CDATA[
			import mx.core.UIComponent;
			import mx.controls.Alert;
			import flash.html.HTMLLoader;
			import flash.net.URLRequest;
			import mx.events.MenuEvent;
            import mx.collections.*;
			[Bindable]
            public var menuBarCollection:XMLListCollection;
            private var menubarXML:XMLList =
                <>
                    <menuitem label="File" data="top">
                        <menuitem label="Browse" data="browse_files"/>
                    </menuitem>
                </>;
            private function menuHandler(event:MenuEvent):void  {
                if (event.item.@data != "top") {
                    if(event.item.@data == "browse_files"){
                    	browseDir(event);
                    }
                }
            }
			if(HTMLLoader.pdfCapability == HTMLPDFCapability.STATUS_OK) {
				trace("PDF content can be displayed");
			}else {
				trace("PDF cannot be displayed. Error code:", HTMLLoader.pdfCapability);
			}
			private function init():void{
				fileSystemTree.directory = File.desktopDirectory;
            	menuBarCollection = new XMLListCollection(menubarXML);
			}
			private function browseDir(e:Event):void{
				var dir:File = new File();
				dir.browseForDirectory("Select directory");
				dir.addEventListener(Event.SELECT, onDirSelect);
			}
			private function onDirSelect(event:Event):void{
				fileSystemTree.directory = event.currentTarget as File;
			}
			private function onChange(e:Event):void{
				var file:File = e.currentTarget.selectedItem as File;
				if(!file.isDirectory){
					var viewer:Object;
					switch(file.extension.toLowerCase()){
						case "flv":
							currentState = "videoState";
							viewer = videoDisplay;
							viewer.source = file.url;
						break;
						case "png":
						case "jpg":
							currentState = "imageState";
							viewer = image;
							viewer.source = file.url;
						break;
						case "pdf":
							currentState = "pdfState";
							var htmlLoader:HTMLLoader = new HTMLLoader();
							var urlReq:URLRequest = new URLRequest(file.url);
							htmlLoader.width = 814;
							htmlLoader.height = 705;
							htmlLoader.load(urlReq);
							var myComponent:UIComponent  = new UIComponent();
							myComponent.addChild(htmlLoader);
							pdf_content.addChild(myComponent);
						break;
						default:
							Alert.show("Unsupported file " + file.nativePath, "Error");
						return;
					}
				}
			}
		]]>
	</mx:Script>
	<mx:HDividedBox width="100%" height="725" paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10" y="41">
		<mx:VBox width="200" height="100%">
			<mx:FileSystemTree id="fileSystemTree" width="100%" height="100%" change="onChange(event)" />
		</mx:VBox>
		<mx:Canvas width="100%" height="100%" id="content" ></mx:Canvas>
	</mx:HDividedBox>
	<mx:ApplicationControlBar x="0" y="0" width="100%">
		<mx:MenuBar labelField="@label" itemClick="menuHandler(event);" dataProvider="{menuBarCollection}" />
	</mx:ApplicationControlBar>
	<mx:states>
		<mx:State name="videoState">
			<mx:AddChild relativeTo="{content}">
				<mx:VideoDisplay id="videoDisplay" width="100%" height="100%" />
			</mx:AddChild>
		</mx:State>
		<mx:State name="imageState">
			<mx:AddChild relativeTo="{content}">
				<mx:Image id="image" width="100%" height="100%" />
			</mx:AddChild>
		</mx:State>
		<mx:State name="pdfState">
			<mx:AddChild relativeTo="{content}">
				<mx:Canvas width="100%" height="100%" id="pdf_content" ></mx:Canvas>
			</mx:AddChild>
		</mx:State>
	</mx:states>
</mx:WindowedApplication>

The result:

Download the source