CSc 337 - Web Programming > Assignments > Assignment 14

Due: 2 Apr 2012, 11:59pm

This project spans three assignments to create an image uploading and viewing system. Users will be able to create and have accounts, to upload images, to view images that they have uploaded, and to view "public" images that other users have uploaded.

In this second assignment, you will implement the core functionality of the project. You'll need to safely allow users to upload photos and to view the photos that they have uploaded. Users will also need to be able to mark their photos as public or private.

1. Users should only be able to upload files that are simple filenames ending in ".jpg" and containing only one ".".
2. Users should be able to view pictures they have uploaded from their home page. The home page should show either thumbnails or simple filename links. Either should open the full-size images in either a new div above the rest of the page or go to a new page.
3. Users should be able to mark their pictures as public or private. Public pictures can be viewed by anyone (given the picture URL), but private pictures can only be viewed by the uploader.
4. Extra Credit: secure your application from attacks we have discussed in lecture, both by using a CSRF token on any form submissions and using GD to rewrite images.

The following code can test for a valid filename ending in .jpg or .jpeg:

if (preg_match("/^[a-zA-Z0-9-_]+\.jpe?g$/i", $filename)) {
    /* Valid filename */
}

Examples for file uploading were performed in lecture and can be found at http://qxlp.net/cs337/examples/mysql/ (see editor_*). PHP's Handling File Uploads documentation may also be of help.

You may need a separate PHP script to display the images themselves by printing out the file. If it looks like it's printing out a bunch of junk data, remember that the "Content-type" header can specify what kind of file your browser should treat it as:

header("Content-type: image/jpeg");

To open a file and force it to be a jpeg, you can use the following code that invokes the GD image library:

$img = imagecreatefromjpeg($original_filename);
imagejpeg($img, $new_filename);

The server has a 100K file upload limit. Please be aware that larger upload attempts will fail.

You will notice a directory called /uploads, next to /web. That is where you should move uploaded files to, since it is outside the scope of your web area. You should refer to this directory in your code from your homework folder with ../../uploads.

Throughout this project, we will be looking for valid handling of edge cases and correct protection against security issues that have been discussed in lecture. Polite error messages are expected when the user attempts to perform an invalid action.

Security advice: we discussed several pieces of advice for not allowing malicious file uploads to damage your system, whether through improper filenames or improper file contents. One last advice is, when storing an upload on disk, not to use any submitted information. If you want the most secure filename, generate it yourself, either using a random hash or something you know to be unique (say, an auto-increment column?). This is not a requirement for the project but worth considering.

As detailed on the homework submission page, this homework must be on the class web server in a folder titled homework14 for it to be graded.