Hack97.Create a Media UploadDownload Center | PHP Hacks: Tips & Tools For Creating Dynamic Websites

Hack 97. Create a Media Upload/Download Center

Allow users to upload and download media files from your application.

Sometimes the customers of your site will want to trade more than just text. They will want to trade media files, images, and who knows what else. The legality of such things aside, this hack will walk you through building a simple media upload/download center for your site.

Figure 10-9 shows the page flow of the upload/download center. The user starts at index.php, where he uploads a file through upload.php. The upload.php script forwards himto the dir.php page, which then shows the files that are available as downloads. Clicking on any of the files will download them through the download.php script.

Figure 10-9. The page flow of the media upload/download center

10.4.1. The Code

Save the code in Example 10-4 as media.sql. It's a simple little SQL statement to create a new table.

Example 10-4. Creating the media table for file uploads

 DROP TABLE IF EXISTS media; CREATE TABLE media (         id MEDIUMINT NOT NULL AUTO_INCREMENT, filename TEXT, mime_type TEXT, PRIMARY KEY( id ) );

Save the HTML in Example 10-5 as index.php.

Example 10-5. A form allowing for an upload

 <html>  <body> <form enctype="multipart/form-data" action="upload.php" method="post"> <input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> <input type="file" name="file" /> <input type="submit" value="Upload" /> </form>  </body>  </html>

The PHP in Example 10-6 handles downloads; save it as download.php.

Example 10-6. Connecting to a database and allowing for file downloading

 <?php require_once( "db.php" ); $db =& DB::connect("mysql://root@localhost/media", array()); if (PEAR::isError($db)) { die($db->getMessage()); } $res = $db->query( "SELECT filename, mime_type FROM media WHERE id = ?", array( $_GET['id'] ) ); $res->fetchInto($row); $filename = $row[0]; $type = $row[1]; $datafile = "media/".$_GET['id'].".dat"; header( "Content-type: $type" ); header( "Content-Length: ".@filesize( $datafile ) ); header( 'Content-Disposition: attachment; filename="'.$filename.'"' ); readfile( $datafile); ?>

The PHP in Example 10-7, dir.php, handles listing files.

Example 10-7. Listing available files by name

 <?php require_once( "db.php" ); $db =& DB::connect("mysql://root@localhost/media", array()); if (PEAR::isError($db)) { die($db->getMessage()); } ?> <html> <body> <?php $res = $db->query( "SELECT * FROM media" ); while ($res->fetchInto($row)) { ?> <a href="download.php?id=<?php echo( $row[0] ); ?>"> <?php echo( $row[1] ); ?></a><br/> <?php } ?> </body> </html>

The code in Example 10-8 is the most complicated of the scripts; it handles file uploads. Save this code as upload.php.

Example 10-8. Loading a file into the database

 <?php require_once( "db.php" ); $db =& DB::connect("mysql://root@localhost/media", array()); if (PEAR::isError($db)) { die($db->getMessage()); } if ( $_FILES['file']['tmp_name'] ) { $sth = $db->prepare( "INSERT INTO media VALUES ( 0, ?, ? )" ); $db->execute( $sth, array( $_FILES['file']['name'], $_ FILES['file']['type'] ) ); $res = $db->query( "SELECT last_insert_id()" ); $res->fetchInto( $row ); $newid = $row[0]; move_uploaded_file( $_FILES['file']['tmp_name'], "media/".$newid.".dat" ); } header( "location: dir.php" ); ?>

10.4.2. Running the Hack

Upload all of these files to the server. Use the mysql command to load the schema into a database named media:

 % mysql --user=myusername --password=mypassword media < media.sql

After the database is up, you need to create a directory called media inside the directory where you added the scripts, used to store the uploaded files. Once that directory is created, surf on over to your index.php page. You should see something like Figure 10-10.

Click on the Browse button and pick a file somewhere. A small JPEG file should do the trick. I found a picture of a fish on Google's image search and used that image for testing.

Figure 10-10. The upload form

Click on the Upload button, and you should get a page that looks like Figure 10-11.

Figure 10-11. The directory of uploaded media

This listing lets you know that the file has been uploaded properly and that the database has been updated with the new file. The file has also been copied to the media directory and given the name <id>.dat where <id> is the record ID in the database.

Next, click on the filename. You should get a pop-up dialog asking you what you want to do with the downloaded file (as shown in Figure 10-12).

Figure 10-12. The download dialog that comes up when the media link is clicked

I used the "Open with" command to show the file in a JPEG viewer just so that I could make sure the file was uploaded and maintained properly.

The result is Figure 10-13. As you can see, the image came through OK; so start loading some MP3s [Hack #96]!

Figure 10-13. The JPEG viewer on Windows that displays the downloaded file

10.4.3. See Also

"Create Dynamic Playlists" [Hack #96]