Would you like to give your visitors the ability to upload files to your site? Letting them upload content with their Web browsers can be very useful, and fun too! You can let them contribute pictures, sounds and other binary files to your site. And you can use a file upload facility on your own Website to update your site’s content easily via your own Web browser.
If you’ve ever used a Web-based email service such as Yahoo! Mail or Hotmail, you’ve probably sent email with attachments. To add attachments to your emails, you simply click the “Browse…” button on the Web page to select the file from your hard drive, and then your browser sends the file to the server. This is file upload in action!
But how does it work? In this article, which has been updated from an earlier version I wrote a few years ago, I’m going to talk you through the process of file upload, and show you how to build a simple file upload example using CGI and Perl — that’s right, Perl! Despite the hype over other scripting languages, Perl is still a powerful and popular choice to power a web site. The example we’ll go through will allow people to upload photos of themselves to your Web server.
What You’ll Need
To build your own file upload script, you’ll need the following:
- Access to a Web server that supports CGI (nearly all do)
- A copy of Perl running on the Web server
- The Perl CGI library, CGI.pm, installed on your Web server. This is probably pre-installed, but if it’s not, you can grab it here.
How Does It Work?
File upload works by using a special type of form field called “file”, and a special type of form encoding called “multipart/form-data”. The file form field displays a text box for the filename of the file to upload, and a “Browse…” button:
The user clicks the “Browse…” button to bring up the file selector, and chooses the file they wish to upload. Then, when they click the “Submit” button on the form, the file’s data is uploaded to the Web server, along with the rest of the form’s data:
At the Web server end, the software (in our case, a CGI script) interprets the form data that’s sent from the browser, and extracts the file name and contents, along with the other form fields. Usually, the file is then saved to a directory on the server.
Now, let’s create a file upload form that allows your users to upload files to your Web server.
1. The “form” Element
The first part of a file upload form is the “form” element:
<form action="/cgi-bin/upload.cgi" method="post"
enctype="multipart/form-data">
Note the special multipart/form-data encoding type, which is what we use for file upload. Note also that the form will post the data to our upload script, called upload.cgi, which we’ll create in the next section.
2. The File Upload Field
The second part of the file upload form is the upload field itself. In this example, we’re creating a form so that our users can upload their photos, so we need an upload field called “photo”:
<p>Photo to Upload: <input type="file" name="photo" /></p>
3. Other Form Fields
You can include other, normal form fields in your form as well as the above field. Here we’re going to allow users to submit their email address along with their photo:
<p>Your Email Address: <input type="text" name="email_address" /></p>
4. The Submit Button
As with a regular form, we need a submit button so that the user can send the form to the Web server:
<p><input type="submit" name="Submit" value="Submit Form" /></p>
The Finished Form
Our complete file upload form looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>File Upload</title>
</head>
<body>
<form action="/cgi-bin/upload.cgi" method="post"
enctype="multipart/form-data">
<p>Photo to Upload: <input type="file" name="photo" /></p>
<p>Your Email Address: <input type="text" name="email_address" /></p>
<p><input type="submit" name="Submit" value="Submit Form" /></p>
</form>
</body>
</html>
Save this file to your hard drive, and call it something like "file_upload.html".
So far, so good! Now let’s look at how to write the server CGI script, upload.cgi.