Download: Flash 8 File Browser
January 13, 2006
Lately we’ve built a flash site with built-in content management functionality. A byproduct of this cms was a flash file browser (based on Flash 8 because of the new upload/download classes) to manage the files of the site. As it’s a reusable »component« we thought we could share it on the blog. It doesn’t have all the features a real file browser has such as a tree view, drag ‘n’ drop, copy/paste etc. but it has the most important features fo managing small flash or photo sites and is easy to use.
Here’s a list of all the features:
[UPDATE: New version (1.1) available. Details here.]
- Upload to different target folders (just add new folders on the server to list them)
- Configurable upload list (add and remove files to a upload list) and multiple upload
- Optionally create thumbnails for jpgs and pngs after uploading (different sizes and presets)
- Preview for images (dragable)
- Turn auto update on and off (refresh/don’t refresh the preview when navigating through the files list)
- Manual preview refresh
- Refresh file list
- Download selected files (multiple download)
- Delete files
- (Select nonused files (see below))
- Tooltips and status box messages
A few words on the code and how you can use it for your own site:
In the src folder in the cms.filebrowser package are three classes:
Config: That’s like a language and configuration xml file. You can translate the file browser to another language by editing all the getters for the status box messages, tooltips etc.. Furthermore it contains all the paths (if you keep the folder structure the only thing you would have to change here is the absolute gateway url. After compiling the fla just put the www package on your server and it should be up and running). Allowed file types can be also set here.
FileBrowser: This is the main file browser class. Normally you wouldn’t have to change this.
FileQueue: A wrapper class for the Flash 8 FileReference and FileReferenceList classes. As the name says you can queue files for uploading and downloading. If you want to know how it’s used and use it for other projects just look into the FileBrowser class. In the Macromedia (Adobe) docs there are examples how to upload multiple files simultaneously via the FileReferenceList but that’s not really useful as you can’t monitor the uploading progress for each file and show the total upload progress at the same time. Another reason for the FileQueue is the multiple download feature…
Dragable, Rectangle, StatusBox, Tooltips (gui package): Dragable and Rectangle are general helper classes for the image preview, StatusBox creates the loading and status messages, TooltipManager generates tooltips (some of theses classes are available in our download section)
RemotingHandler: As the file browser uses flash remoting (amfphp) this wrapper class is used to call the remoting methods (also available in our download section).
About the “nonused files” feature:
Below the file list there’s an icon that selects all files which are no longer used – at least theoretically ;). The meaning behind this is: If admins upload tons of images and files via the file browser but some of the files aren’t actually used on the site this would highlight all of those files. You could store file links in a database or xml file, search all those file links and then compare them with the files that are physically on the server. Of course this depends on your application and if you store the files in a database, xml file or whatever. In the FileBrowser.php service class (php/flashservices folder) there’s a function called getNonusedFiles() which currently just returns true. The function gets the uploadFolder and the currently selectedFolder as parameters. You could get all files in this folder on the server (for example via the getFiles() function), search your database for file links and then compare the two arrays, for example via the php function array_diff or so. You should return the nonused files as an array and the FileBrowser selects them for you. The file links in the returned array must consist of the foldername and filename (e.g.: gallery/pic01.jpg). If you don’t want to use that feature at all you can open up the fla and delete the icon (mc_fileBrowser in the main folder).
How to add/modify thumbnail presets:
If you open up the FileBrowser.fla and edit mc_thumbDetails you can change the presets via the labels and data property of the combo box (property inspector).
If you would add a data value of h|200 this means that the “height” radio button will be selected with a value of 200 (w|100 means “width” radio button, value 100) when the preset is selected.
Skinning and styling:
You can completely change the look of the whole file browser by opening the fla and modifying the assets in the library. The styling code for the v2 components is located in the first frame of mc_fileBrowser.
File Browser API:
In first frame of FileBrowser.fla all public methods, events and getters are listed. It doesn’t have many methods as the most important thing when used in a flash cms is to get the currently selected folder and file.
If you keep the folder structure in the www folder the only thing you would have to change is the gateway url in the Config class (this is the absolute path to the gateway.php in the php/amfphp folder), compile the FileBrowser.fla and put the whole www folder on your server. Then just put folders and files into the upload folder and you’re ready to browse :).
You can download the complete FileBrowser.zip in the download section.
Filed under: Flex/AS3