PHP Tutorial: Uploading Files

By Vince Barnes

In previous parts of this series, we've discussed the basics of forms (see parts three and four) and we've introduced the basics of file manipulation.  Now we're going to put this together, throw a little spice into the mix, and create a form that will allow for a file to be uploaded.

The Form

Let's start with the form:

<title>File Upload Form</title>
This form allows you to upload a file to the server.<br>

<form action="getfile.php" method="post"><br>
Type (or select) Filename: <input type="file" name="uploadFile">
<input type="submit" value="Upload File">


OK!  That's a pretty basic form, but it's going to get the job done!  Now let's take a closer look at it.

First, notice that the action attribute of the form statement is going to cause the php page "getfile.php" to be called to process this form when the submit button is clicked.  (Also notice that we're using method="post", which we discussed in part four)

Next, in the form is an input type="file"   This provides a place for a filename to be typed and a "Browse" button which can be used as an alternative to typing the name, and opens up a dialog box which allows the user to select the file they wish to upload.  (Some browsers may provide a slightly different appearance for the input type="file" but the effect is still the same.)

Just to make things a little more self explanatory, we've changed the text on the submit button to read "Upload File".  That should be clear enough!

Processing the Form

Now we need to process the form, so we must create our "getfile.php" page.  Here we go:

<title>Process Uploaded File</title>

move_uploaded_file ($_FILES['uploadFile'] ['tmp_name'],
       "../uploads/{$_FILES['uploadFile'] ['name']}")


This is the basics of getting the job done; we'll take a look at this first, then embellish it a little to make it more user friendly.  There's quite a lot of info to clarify about that one statement in there!

The statement uses the function "move_uploaded_file" which is a function built in to PHP.  When the file was uploaded, PHP created a temporary copy of the file, and built an array containing information about the file.  $_FILES is that array.

The move_uploaded_files function takes two parameters, seen here contained in parentheses and separated by a comma.  The first parameter tells the function where to get the file it is to move (copy), and the second tells it where to put the copy.

In the first parameter, we need the name of the temporary file that PHP created.  To get that, we reference the $_FILES array with associative indexes to the pieces of information we need.  "Huh?" you say!  Let me explain further!  The first associative index we need is to indicate which file we are talking about -- in our example here we only included one upload file, but our form could have had more than one input type="file".  To let PHP know which one we are dealing with, we use the name of the input field on the original form; in this case it was 'uploadFile'.  Next we refer to the 'tmp_name' associative index, which provides us with the name of the temporary file PHP created.

In the second parameter we similarly use the $_FILES array associated with our original input field name, but this time we reference the 'name' associative index.  This provides us with the original file name as it was on the user's computer.  By using "../uploads/" along with this reference, we tell the move_uploaded_file function to create a copy of the original file in a directory called "uploads" within the website, and to name the file with its original name.

Job done!

At least, we hope it is!  Things can go wrong when computers are involved, however.  I know -- that's tough for you to believe, right?   <g>   In the next part of this tutorial series, we'll embellish this example with tests for thing that can go wrong, code to handle those errors, and code to let our user know what's going on.

Continue to the next part of this Tutorial

Return to the Tutorial Series Index

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date