AjaxFileListing

Part of: Ajax Actions

Description

Create a linked list of files from a directory on your server using this Action. Requires PHP on your server and JavaScript in the browser, but falls back gracefully if JavaScript is disabled.

Draw an instance of this Action on the page where you want the list to appear, or insert one as an inline element within another HTML item on the page.

Enter the relative path to your files directory from the current page. So if your list is in the root directory of your site, and you want to list the files directory, you would enter ‘files’ in the path field.

Choose a “loading” message, either the text ‘Loading…’ or a 16px or 32px animated GIF, eerily similar to the loading animation used in most Mac OS X applications.

Press the Make Index File button, and generate the index.php file you will need for this whole thing to work. You will need to upload this file separately, so put this file somewhere meaningful on your hard drive. You will only need to generate this file once — the index file itself never changes, so you could even re-use it in another folder if you wanted to list more than one directory on your server.

Upload your site to the server, then use an FTP application like Transmit to connect to your server space. Create the files folder (call it what you like) and put all your files in it. Then add the index.php file you created with the Action to this same folder. Remember — this folder must be in a publicly visible location (so inside your public Web directory somewhere) and must have permissions set to allow anyone to browse it (775), or else the links will not work.

Browse to the page you just created, and you should see a momentary flash of the loading indicator, then the list of files from that folder.

Later, if you want to update the list of items on your page, all you need to do is upload or delete files from within that folder. Each time someone visits your page, a new list of links is generated and displayed, so this list will always reflect the contents of your server.

You can use CSS to style the list as you like. The list has the classname dirlist, and each item in the list will either have the class even or odd. If you set a different background-color for each of those styles, you will be able to show alternating stripes like a Finder list view or iTunes.

---

Register or log in to view or add comments.