FREE! Building A File Upload and Rating Application Support

Following on from his free tutorial on building a Content Management System with Server Behaviours and the Advanced HTML Editor, Matt shows how build a site that allows users to upload their own files, and rate those files. There's also a password-protected moderator's area so that you can be sure that all files can be checked before being made "live".

This free tutorial is suitable for beginners and uses only built-in Dreamweaver server behaviors and the DMXzone Pure ASP/  ASP.NET Upload Extensions! The uploading element is also PHP compatible, but the "rating" system doesn't work with PHP since it has no Command behavior to do the rating with.

Files

The site is essentially divided into two parts: the viewer/uploader and the admin section. The following files make up the uploading and viewing section:

• uploader.asp
• uploaderconfirm.asp
• uploaderview.asp
• uploaderrating.asp

and the these files form the admin section:

• uploaderadmin.asp
• uploaderdelete.asp
• uploaderedit.asp
• uploaderlogin.asp

Create these files now. They're empty, but it's useful to have them ready beforehand, so that cross-linking between them is easier. Also create a sub directory called uploads, this will be used to store uploaded files.

Building upload.css

Both sections will be styled by upload.css which is pretty rudimentary at the moment. I find that if you're developing too many things at once, it's difficult to keep track of everything, so personally I advise using a basic CSS while you're getting all the back-end functions working (like the database, the uploading, the validation etc). When all the "logic" is working fine, then you can go back to the CSS and make it look like the gorgeous work of art that you planned, secure in the knowledge that whatever you do with the CSS, you're not going to hurt the cogs and wheels and pulleys that do the heavy lifting.

    body{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 80%;
    }
    td {
          margin: 4px;
          padding: 4px;
    }
    form{
          background-color:#E8F8FF;
          padding: 4px;
          border: 1px solid #003399;
    }

This styles all our text in Arial at a nice size, pads all our td elements, and gives our forms a background and border.

Building Uploader.asp and using the Upload Extension

Uploader.asp

Start off by building a page like this, with a basic page heading and intro followed by our upload form. Make sure your form is set to be EncType: multipart/form-data. You need to set this for the upload to work. I've named the form uploader.

Our form elements are called file, type, title and summary. Type is used to define which sub-directory we store the file in for easy organisation on the server; I've given it values of Modern, Experimental and 30s, but you should use whatever is suitable for your site.

Go to the application panel, and select the server behaviours pane. Click + > DMXZone > Pure ASP Upload. A dialog like the one shown below will appear. Note the help box at the base of the dialog which will provide useful context sensitive help.

The Main tab is our first port of call, and gives us a number of options as to how uploads are handled.

Path type sets which type of file system location to use. Some servers disable parent directories (../) for security reasons, so if this is true and you are working below the root of the site set it to absolute.

The upload folder is simply whichever folder you want the files to appear in once uploaded. You can browse for it as you would with any other directory. In addition you can force files to appear in sub-directories based on Form fields. Here I've used the type field from our upload form to save it in different folders depending on the genre of the music. Note that you use UploadFormRequest("") for this in the ASP Upload Behavior.

Allowed Extensions tells the behavior what type of files to allow to be uploaded. This is a very useful security precaution to stop people uploading anything risky or malicious (like executables, Trojans, Viruses, and so on). You can set the option to all, images or a custom one. I've set it to MP3, since that's all we want. If in future we wanted other files to be allowed as well, we'd add a comma and the next file extension.

Store Filename is used if we are inserting our filename into a database. We need to decide whether we are storing the whole path or just the filename. This will depend on how you want the application to work. Since we're using sub-directories for different genres of music, I'm storing the whole path.

Conflict handling allows us to choose what happens if somebody uploads a file with a name that already exists. We can choose to overwrite the existing file, Skip the upload, or automatically Make the new file unique (by adding a number to it) or give an error message. Which you use will depend on your application. Since for ours it's possible that two people may upload the same song from a different artist with the same filename, we'll use the make unique option.

The timeout setting sets how long the script will wait to upload a file. This will cause the script to stop if the upload is taking too long, or the file is just too big. This stops your server getting jammed by people trying to upload files.

Similarly we set the maximum filesize we want to be uploaded. I've set it at approximately 2megabytes (enough for a short optimized MP3), but you'd want it to be smaller than that if you're uploading images. Be very careful with this setting if you have limited web space. If you only have 20mb of space and every user can upload 2meg files, you could very quickly run out of hosting space!

The after Uploading Go To section tells the form where to go when uploading is finished. If you are only uploading files, then use this to set where your upload confirmation page is. However, since we're going to do some database inserts (so we can store the extra information), we'll skip it and use the insert behavior to set where we end up instead.

Moving to the advanced pane, you'll notice a variety of options for dealing with uploading images.

We're not using them in our application, but they're useful settings if you're uploading and storing images. We will make use of a progress bar though. This is a nice little tweak that lets the user know that something is happening with their upload. I've used the File Copy Animation, since most users are familiar with this.

Click OK and close the dialog.

You'll get a message saying that items have been added to the ScriptLibrary folder. You'll need to upload both incPureUpload.asp and incPureUpload.js to your testing/live server for the upload to function. These are programs that the extension has added to your page in order to allow the upload to work; if something goes wrong when you're testing, check to make sure that these have been uploaded!

Go to the Bindings panel and add a request variable binding of title:

We'll use this to transfer the title of the song onto the upload confirmation page.

Again in server behaviors panel, hit + > Insert Record

Select the correct connection and table. Browse for the file you want to go to when you've finished inserting.

Hit the parameters button of the file browse dialog:

and you'll bring up a dialog like the one below. We'll use this to transfer the form field title into a URL parameter for the confirmation page, so that when we link to that page, the contents of the title field are added to the URL. It's a quick and convenient way to pass small amounts of data between pages, but because it is part of the URL it appears in browser histories and so it should never be used to pass sensitive information like passwords or credit card numbers!

Add a name called title and set the value to be the form binding we created earlier.

When we've finished inserting our record, the title will be appended to the url like this : uploaderconfirm.asp?title=mysong which we can use to confirm which file was uploaded and added to the database.

Ok out of the file dialogs and finish filling in the Insert Record dialog. The Get Values From box, should be set to uploader, since that's the only form you created. Make sure the correct form elements are connected to the correct database columns. Note that filesize and type are both ignored, and file binds to the name column. The ASP Upload code will make sure the file field contains the information we requested (so the full path, rather than just the filename).

Hit OK and close the dialog. Save the file.