b-log – betriebsraum weblog

Software Development, Human-Computer Interaction, Projects…

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.]

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.

Installation:
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 :).

Download:
You can download the complete FileBrowser.zip in the download section.

Filed under: Flex/AS3

31 Responses to “Download: Flash 8 File Browser”

  1. Josh Tynjala says:

    Looks like something I could probably use in the future. I’ll have to find some time to play around with it.

  2. This looks indeed like a very helpful tool – thank’s a lot for sharing it!

  3. felix says:

    thanks a lot for your positive feedback :).

  4. Mike J says:

    Nice job, like the colonel’s fried chicken that is b*tt-kickin’!

  5. luchyx says:

    The download image action no work on firefox 1.5
    but it´s a great app!

  6. felix says:

    I’ve installed Firefox 1.5 on my machine here and it works perfectly…hmm…

  7. Thanks very much for releasing this. Looks like a great tool! Definitely something I will explore when I have some time.

    :)

  8. markus says:

    I have installed Firefox 1.5 too and it works great !?

  9. R Howard says:

    First off, I want to say awesome job. I am having trouble compiling the .fla. It’s throwing errors for me and I unzipped the file as default.

    **Error** C:\Documents and Settings\Administrator\Desktop\fileBrowser\src\de\betriebsraum\remoting\
    RemotingHandler.as: Line 27: The class or interface ‘mx.remoting.Service’ could not be loaded.
    private var service:Service;

    I get 20 of these errors. They refer to the remoting and filebrowser dir’s. Can anyone help me?

  10. felix says:

    hi…probably you don’t have the flash remoting components/classes installed. You can download the components and the classes from
    macromedia (the classes can be downloaded here).

  11. mitch christ says:

    Do we need to have a Flash Remoting service installed on the server for this to work? Or, is PHP enough?

    Such a cool application, I’m really impressed and grateful you share it.

  12. felix says:

    hi mike,
    you need to have amfphp installed but that’s all included in the www/php folder…just modify the gateway url in the config class, compile and put the www folder on your server…

  13. chegwoth says:

    Thanks a lot for sharing the file with us, if there is anything I can do to help, perhaps send you a skin?

    I have installed the Remoting Components, and the classes that you sugested to download already exist in my applications folder, and I am still getting the output errors,
    any suggestions?

    thanks

  14. Daniel says:

    I have PHP Version 4.4.2 on my server. Can FileBrowser run on my server?

  15. felix says:

    @chegwoth: what do you mean with applications folder? if you downloaded the remoting source classes you have to put it into your configuration\classes\mx folder (C:\Documents And Settings\etc…)

    @daniel: yes, should be running on your server…

  16. newman says:

    hi!
    thx for great tool – FileBrowser. I have only one problem. I can’t publish the .fla file – “The class or interface ‘flash.net.FileReference’ could not be loaded”. This is deafault Flash8 class and it exists in “Macromedia\Flash 8\en\First Run\Classes\FP8\flash\net”. Of course I downloaded all mx classes from Macromedia.
    Could you help me?

  17. newman says:

    hi again!
    I changed PublishSettings -> FlashPlayer8 and now I can Publish without problems :) I hope that .swf published to FP8 can’t generate next troubles ..?

  18. felix says:

    hi,

    sorry, I’ve compiled the swf with fdt and mtasc (version 8 flag) but the fla file was saved in mx2004 (and publish settings with flash player 7). I changed that now so the version in the new zip download is saved as flash 8 (and flash player 8 publish settings). by the way: the flash remoting source code for flash 8 is already installed with the component installer (in mx2004 you had to install the components AND the source code). flash 8 remoting stuff can be downloaded here.

  19. Cay says:

    Hey, very nice!, I´m doing something pretty similar here , and I run into the problem of beeing unable to deliver any message from the PHP to Flash, so I had no way to actually tell the user if the file was uploaded correctly or not… So I finnaly used a little trick: send a “404 File Not Found” header when the upload fails, this way Flash triggers the onHTTPError… it would be something like this:
    if ( @move_uploaded_file( $tname , $fname )) {
    header(‘HTTP/1.1 200 OK’);
    }else{
    header(‘HTTP/1.1 404 Not Found’);
    }
    ?>
    cheers! :)

  20. felix says:

    hi,

    cool. I like the little loading bars for each file :). thanks for the 404 tip…!

  21. James says:

    Hi! Excellent app :D Is there any way to determine maxfile size? I’d like to stop a 20Mb file upload :)

    Thanks again, good job!

  22. felix says:

    hi james,

    currently this feature isn’t built-in but feel free to modify the classes…

  23. newman says:

    I use flash8 to Publish FB. I added in first frame my own preloader and the main FB engine is on the second frame. When I run it online I don’t see ma preloader and I don’t see anything until my FB is not loaded. It looks like _visible = false until everything isn’t loaded. Could ou give me some tip where can I change it? thx! :)

  24. felix says:

    hi newman,

    you have to preload the as2 classes. grant skinner has tutorial on this.

  25. Elabjer says:

    Hey Felix – excellent work !
    I managed to set up and modify FB just fine, however I can’t get it to work properly while testing. None of the file-related functions seem to work from the IDE (works ok once in browser). Is this a AMFPHP misconfiguration ?

  26. Zac says:

    Hi, Just a BIG thank you for this script. I managed to get it working eventually. I was trying to point the FileBrowser to a directory outside of the default settings…and managed to find the place to do it in the ‘src’ files under the ‘\src\de\betriebsraum\cms\filebrowser’ directory. The config.as file can be altered accordingly. It asks you to give a directory name relative to the ‘php’ folder…I just put all my amfphp files into a root folder called flashservices…and pointed my FileBrowser to another root directory I am using for a gallery. Now I can upload files to my gallery and reindex it…and hey presto…auto gallery…Well done on this mate. I appreciate anyone who willingly offers this kind of application as open source.
    I have one question, Is it possible to make the Filebrowser crawl subdirectories within the ‘upload/folder’ directories ? i.e…multiple directories within the ‘upload’ folder ? Thanks though.
    Zac
    U.K

  27. felix says:

    @elabjer: testing the file browser locally from the ide should be working (you have to run a webserver of course), should be also working if you connect to an online webserver from the ide (at least the file browser retrieves the file list, for viewing/deleting files you would have to have the same files locally on your hard drive…that’s because of the relative paths in the config.as)

    @zac: you can have as many folders under the upload directory as you want but nested folders are not supported because the browser currently has no directory browser (main purpose is for small flash sites with just a few different folders…)

  28. tom says:

    Works wonderfully. Any ideas or suggestions for working with subdirectories?

  29. nyls says:

    Hello,

    I have ported the amfphp remoting stuff to .NET fluorine remoting, if you want I can send you all the stuff ?? You only have to change the gateway and upload script path and ready to go.. Added one thing to your AS namely when a picture is viewed in the preview it can’t be deleted (it is in use), so on delete I empty the preview window..

    Further all works like a charm, very nice component .. thanx

    nyls

    nyls

  30. Thank u! Nice job! :D

  31. Sergio Daroca says:

    Awesome and beautiful sharing.