I Love Code - Free Coding Tutorials and Resources

Hey there!

I’m going to walk you through how to make your very own file upload system in PHP and little HTML.

Before I dive into everything I want to urge you to have a good grasp of HTML and a little knowledge of PHP before continuing this tutorial.

Now that we have that out of the way.

Introduction

To really start this off on a good note, I love you. Now that I have that out of the way.

What we’re going to do is create the HTML form first and then attach the PHP to it to make it fully functional.

Since you already know some HTML this should be a snap for you if not follow along below:

We’re going to want to start off with a basic HTML page with a form inside of it:

So I am assuming you do have basic knowledge of HTML and can understand that pretty well.

You can see there that I have a regular HTML form with a input whose type is a file input.

But there is a attribute on the form that is not normally used when dealing with just text inputs and that is the enctype attribute.

The enctype attribute with the multipart/form-data value tells the browser and PHP that there is a file attached to this form and to handle it in a certain way.

We have our basic label and paragraph tags.

Then we have our inputs:

Our file input: I named this input file_upload.

Our Submit Button: I named this upload_button

These names will be important later on when we’re working with our PHP

*Note: you can make this form look any way you want as long as the file input’s name is the same, you’re good*

Okay! So enough with this HTML stuff lets get down to the nitty gritty, the PHP.

First thing we are going to do is write a function to detect when the user clicks the upload button and process the upload.

To start off we’re going to need to open our PHP tags and start a new function.

Once you have that started you’re almost done. Well not really but you’re doing a GREAT job!

To detect if the upload button was clicked or not we’re going to use the PHP Global Variable $_POST and a lovely function called isSet()

So you see there those two go hand and hand.

Before moving on I will explain what is going on.. Of course..
The function isSet() will check to see if a variable is set.

The variable $_POST['upload_button'] will only become set when a form is processed, meaning when you first visit a website there are no $_POST variables set until you click a submit button. Once you click the submit button the form and it’s fields are then put into the global variable $_POST as an array.

So if we have our 2 inputs(file_upload and upload_button) and you click the upload button, $_POST now has $_POST['upload_button'] and $_POST['file_upload'];

If we were to write that snippet of code out as a sentence it would read as this:

“If the variable of the form button whose name is upload_button has been set then”

If you notice that sentence kind of ends without completing what to do if the variable is set.

Which brings us to our next part, what we’re going to do now is make our lives easier and set some variables.

Definition of a variable is: a symbolic name associated with a value and whose associated value may be changed.

So basically it’s a box and you stick stuff in it and you take stuff out. You can say hey I have this stuff in my box, or is this box empty, does this box have numbers in it? Does this box make me smile?

So back to setting variables.

Now before I go on any further (and so I don’t confuse anyone who isn’t already confused) I want to explain what is going to happen next.

When you “Post” a multipart/form-data form with a input of the type file it gets handled differently by PHP. Instead of using $_POST to access it’s values you’re using the global variable $_FILES which will break down into different options:

• $_FILES['file_upload']['name'];
  • This is the original name of your file ie: If you uploading a file named ‘Picture 2.png’ this is what this variable’s value will be set to.
• $_FILES['file_upload]['tmp_name'];
  • This is the temporary name that PHP assigns this file when it gets put into the temporary uploads folder.
• $_FILES['file_upload']['size'];
  • The size of your file in bytes (hehe bytes)
• $_FILES['file_upload']['error'];
  • If there is an error associated with the upload this is where it will be stored (for the most part)

What we care about for this tutorial is the name, the tmp_name, and the size.

Adding some variables and another snip of code:

So instead of typing $_FILES['file_upload']['name'] and $_FILES['file_upload']['tmp_name'] over and over and over.. We stuck those values in simpler to write variables: $name, $tmp, and $size. We also added in a variable called $upload_dir this variables value is ‘uploads/’ which will be where we are going to place the files that we upload.

We also added a check to make sure that directory exists before continuing if it doesn’t not exist then we halt the script and spit out an error.
Next we’ve added a $max_size variable, this value will tell our script how big of a file to allow. This is set to 5 MB right now (5 Megabytes * 1024 to kilobytes and then times 1024 to bytes) but you can change it to whatever size you want to allow.

Next what we’re going to do is check the file size of the uploaded file versus our max file size.

So what we are doing here is writing an if statement to check to see if the size of the file we uploaded is greater than the max file size we had set previously. If it is we will show an error message and won’t go any further. If it isn’t then we will continue with our uploading.

Next we want to check to make sure the tmp_name we have is actually a file that has been uploaded. We can do that with the is_uploaded_file($tmp); function.

This will return true or false, true if it is an uploaded file, false if it isn’t.

We would write a check for this like so:

}

So you can see we are asking the if statement, if this is not an uploaded file then show this message if it is then continue with the uploading.

Now watch carefully because this next step is going to go quick.

Tada! in this last part we use the move_uploaded_file($tmp, $upload_dir . $name) function to move this uploaded file from the temporary directory to the new one.

The parameters for this function are as follows. move_uploaded_file(tmp_file_name, upload_directory . file_name);

We issue an if statement to see if this function returns false(it couldn’t be moved for whatever reason) then show a message if not, let the end user know that this is all done and the file has been uploaded.

Tada! Now that’s all over all we have to do to get this working is add a little snippet of code to the HTML and that snippet is:

I like to stick this above my input fields so the user see’s the messages that are displayed more easily. But you can stick it where you like (That’s what she said).

Once you have that added in you can try it out and upload your own file! YAY! Make sure you create the uploads directory!

Here is everything put together:

This file is available for download from the link below:
Thanks and I hope you enjoyed and learned something from my tutorial!
-Frankie Laguna