Home » Code Samples, Flex, Tutorials

Flex File Browser – PDF, Images, and Video Player

21 August 2008 | 32,881 views | 18 Comments


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

  • TahirAlvi

    nice work.

  • TahirAlvi

    nice work.

  • Anonymous

    Sucks that htmlLoader is only available in air and not flex web …. Hmmmm . kinda disappointed ๐Ÿ™

  • No

    you have to turn off transperencies

  • Shriraksh

    Is there a way to open Microsoft word documents in an air application?

  • Pradeep

    Great Job. I tried opening a document file by writing the same code as that of PDF in the switch case but It showing blank screen. It would be great if you could please let me know how to open a doc file.

    Thanks in Advance.

  • Pingback: Flex File Browser โ€“ PDF, Images, and Video Player « TMHs Web Tips()

  • @baluravi

    The styles.css is already included in the src/assets/css/ folder included in the download.

  • @baluravi

    The styles.css is already included in the src/assets/css/ folder included in the download.

  • baluravi

    css file is missing please attach to that code wit mxml code

  • Pingback: flexๅผ€ๅ‘ » Blog Archive » Flex File Browser โ€“ PDF, Images, and Video Player()

  • Karthik

    Nice Work great

  • Stanley

    Here is the online file browser manager that I use.

    http://www.flexappsstore.com/index.php?route=product/product&product_id=50

  • Stanley

    Here is the online file browser manager that I use.

    http://www.flexappsstore.com/index.php?route=product/product&product_id=50

  • @Reiner

    I do not believe that using the file system functions for a web application is quite as easy. When deploying to AIR, users have to install the application on their system, so the file “explorer” becomes less of a security problem. When deploying for the web, security is a little more stringent.

    I have not tried to create a file explorer using Flex that is deployed for anything other than AIR as of yet.

    If anyone knows any different, please feel free to share more information or links.

  • @Reiner

    I do not believe that using the file system functions for a web application is quite as easy. When deploying to AIR, users have to install the application on their system, so the file “explorer” becomes less of a security problem. When deploying for the web, security is a little more stringent.

    I have not tried to create a file explorer using Flex that is deployed for anything other than AIR as of yet.

    If anyone knows any different, please feel free to share more information or links.

  • Reiner

    Hi, I wanna know if you have a example like this but for a web application.

    I work very nice but only in desktop app.

    Kind regards

    Reiner

    reinerra@gmail.com

  • Reiner

    Hi, I wanna know if you have a example like this but for a web application.

    I work very nice but only in desktop app.

    Kind regards

    Reiner

    reinerra@gmail.com