PHP and MySQL®: Create-Modify-Reuse

6.1. Design of the Ajax File Manager

In this chapter, you'll build your own file manager to allow users to manage files and directories on a remote web server. The core requirements are pretty straightforward; users will be able to:

• Upload files from a local computer to the remote server

• Download files from the server to their computer

• Rename or delete a remote file

• Create a new remote directory

• Rename or delete a remote directory

• Navigate the directory structure in an intuitive manner

The utility presents a scrollable table listing the remote directories and files. Each entry shows a small mime-type icon based on the file's extension, the name, the size, and the date it was uploaded. Below the listing is a series of action icons forming a menu to perform various tasks (see Figure 6-1).

Figure 6-1. Figure 6-1

JavaScript is used heavily on the client-side to make the file manager more user-friendly. The user will be able to see changes to the remote file system in real time without having to reload the entire web page. He or she will perform actions by selecting the target file or directory from the listing and then clicking the appropriate action icon. If more information is needed to complete a task (such as the new file name for a rename) a form will be displayed with JavaScript alongside the action icons. Figure 6-2 shows the detail of a file upload.

Figure 6-2. Figure 6-2