Author: Thanh Phu

This week’s assignment that I gave to another group member, but the result turned out unsatisfactory. It can’t even delete a folder, move a file or copy them. Yes, it’s pretty easy to build a PHP file browser, it’s just a matter of calling file_* functions, but combining them together can be tricky. For example, this guy used GET to pass data and operation between screens. What happen if a file name contains & or =, the characters that make the GET themselves? It has to be revamped (and I have to do this -__-)

About code style, they claim to have done it in procedural style, but… I don’t know what kind of programming is that to name. Well, it worked on some aspects nevertheless, so I decided to move straight to fix the interface. I just can’t bear to see that pile of mumble-jumble ><; and the result…

Interface

Icons are from famfamfam. Thanks James! You may notice that it looks familiar. Yes, it resembles Vista’s explorer. I love Mac in overall but for the interface alone, explorer looks better than finder. I also tested some css pseudo-class: the rows will be highlighted when you move over them. A breadcumb would be trivial to implement too, but that’s something I can work with already 🙂

The code

Basically, this is just a directory list with more function added at the beginning so that it will execute the required operation before listing. The original code used scandir() to get the files in the directory, which is a php5 function (the only thing PHP5 specific in the project); I decided to fall back to its PHP4 equivalent so it can run on older servers (the code is from PHP manual)

$dh  = opendir($newPath);
while (false !== ($filename = readdir($dh))) {
	$files[] = $filename;
}
sort($files);

I know, most host have upgraded to PHP5 and PHP6 is at the horizon, but when it’s so easy to make it compatible, why not?

For most online file browser I’ve seen, they will only allow clicking on the filenames to open them; while on your familiar explorer, nautilus or finder you can click anywhere on the row, so I decided to move the onclick to the row <tr>.
It worked! But then another problem rises: whenever the checkbox is ticked, the view changes to the corresponding file / directory without waiting for the user to choose what to do with the file!. This is possibly the reason why online file browsers does not allow this 😉 After some research, I found a way to stop the event from bubbling (Internet Explorer terminology) or propagating (W3C terminology) from the checkbox to the row (i.e. after you check the checkbox the browser will stop and forget the fact that you clicked inside the row)

function doSomething(e)
{
	if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
}

The code above do fine if you set the event with attachEvent(), but for the code I have the event is attached in the traditional way (onclick=”js”). And trying to put an anonymous function in is no use, “e” would be undefined in all of the browsers 🙁

The secret? In IE the window.event could be accessed but firefox does not seems to have it. Instead, it have “event” (duh) and the following code work (I wrote it together in one line to put to the onclick)

if(!e){var e = window.event;if(!e){e = event;if(e.stopPropagation)e.stopPropagation();}e.cancelBubble = true;}

Coding this, just to know that directory browsing can be tricky. There are functions, like that there’s a rmdir, but It just won’t delete non-empty directories and unlike the command you know from popular OSes, it doesn’t have /s to –-recursive to force delete the directory. That’s when you have to write your own function to get the job done.

function recursiveDel($dir) {
		if ($dir[strlen($dir) - 1] != "/")
			$dir = $dir."/";
		$mydir = opendir($dir);
		while(($file = readdir($mydir)) !== false) {
			if($file != "." && $file != "..") {
				// Unix compat
				chmod($dir.$file, 0777);
				if(is_dir($dir.$file)) {
					chdir('.');
					recursiveDel($dir.$file.'/');
					rmdir($dir.$file);
				}
				else
					unlink($dir.$file);
			}
		}
		closedir($mydir);
		rmdir($dir);
	}

Now that most directories can be deleted, what about directories that contains special characters mentioned above? Well, you may notice when browsing that sometimes your Address bar contains something like %2f%ac; they are ASCII characters, they can be embedded in an URL and then retrived later thanks to urlencode() and urldecode(). A better solution is instead of using GET, use POST or a hidden field.

About security, the guy didn’t even check what the user put in. The only check there is the firectory name check “Invalid directory name. It can’t contains . .. /”. Anyone could just put in path =/ etc / passwd in the address bar at any time. What a common beginner pitfall! A couple of str_replace() wouldn’t hurt…

Below is the code to this moment. Note that its capability is limited to navigating, creating directories and Upload file, but at least it have done those quite good and if one’s only need is somewhere to occasionally throw one or two file in; or to study how file managers work, this script is a good choice 🙂

Download the source

Gotta OOP-rize it and clean it up…

4 hours later edit: Phew, done! ^^ You can have a peek over here. This is a stripped down version, so you can’t upload and edit / preview the file for obivous reasons 😛 other than that, all functions displayed on screen is working now.