Image Uploading With Auto Thumbnails Using PHP

At many times, simple tasks might appear to be very complicated to accomplish. This might be because the task in hand is so important to us, so important to the extent that we cannot think that it can be important as much and simple at the same time. Uploading images using php is very simple and important at the same time. In many scenarios you cannot escape uploading images when you develop a php script.

Preparation
Create the directory that you want to store your uploaded images in, also, if you want the thumbnails that we are going to create for the images to be stored in a different directory, create a thumbnails directory. A sub-directory in the images directory would be a good idea. Give both directories write permissions. If you are on Linux, chmod 777 will do the trick.
Now create a php file that will  upload your images and get to work. I will name mine uploader.php

The Form
If you know a little about php, you know that forms in php are simply html forms. If you don't, now you do.
For our purpose, we need a simple form with a field to locate the image to be uploaded and a button that will post our command to upload images. Your form should look something like this.

The form does not look fancy and neither does the form html code.

Let me highlight the important codes so you can understand what is happening:
    a- action="uploader.php": The action tag of the form tells the form which file processes the form when submitted. In our case the file is uploader.php.
    b- enctype="multipart/form-data": To avoid technical definitions, the enctype="multipart/form-data" tells the form that is going to upload files. With out this tag, the form will not upload your images. If you insist on technical definitions, then click here.
    c- We are going to use the MAX_FILE_SIZE hidden field to limit the size of the uploaded image, if the size of the image exceeds the MAX_FILE_SIZE an error will be returned. This could be useful to avoid too large files, not to mention that some hosts has upload limits.
    d- type="file": This is the field that will help you locate the image to upload. Once you have an input field of type="file", you get a textbox field and a bonus browse button to locate the file to be uploaded.
    e- Of course, <input type="submit" value="Upload Image"> is the button that will submit the form for processing.

The Code
Our plan is to upload images, create thumbnails for the uploaded images and have a way of seeing the images that we have uploaded.
I will start with coding the function that will create the thumbnails for me. The thumbnail is nothing but a smaller version of the large image. Knowing that I am storing my thumbnails in a different than the large images directory, and by re-reading the previous sentence, I know that I have three parameters  for my create_thumbnail function. Namely,  the source image, the destination thumbnail, and  thumbnail size; size is width and height, I will ask for the width and deduce the height to keep proportionality. If you don't agree, you can take both height and width and save a little calculations.
    So lets write our create_thumbnail function:

The functions in blue are all php functions, you can go to the www.php.net and see details of each one. Also you can check the one that works with your version of php. You can even find sample codes that is similar to this function and might suite your needs more.

The get_image_extension($image) is a function that we will have to write to see the type of image that we are dealing with. get_image_extension($name), is a simple function that works by going though the name which is a string type, when it hits a dot, it starts recording everything after the dot and then the result is returned, which of course is the file extension (the image extension in our case.

One more thing that we have to decide on is how to deal with duplicate images. Among the many options is to delete the existing image if the uploaded image has the same name, some others give the image the time stamp of uploading as name so to guarantee no images are duplicates.  You can do that while uploading the image, but I will write a function that will generate a random name with my given length for the uploaded image. You can change this function as you will and name your images the way you find appropriate.

Now that all our functions are ready, lets get to the real work by defining our variables:

When the user presses the 'Upload Image' button, the $_POST will become true, so we can check by the value of $_POST and perform action. and this is the code that does the uploading:

Place all the php code and functions between <?php and ?> tags, then put the html of the form below it. Anywhere in the html where you want results to show, just add:
<?php echo $results; ?>

Test your code and enjoy. Don't forget to subscribe to this article below to receive notifications when it get uploaded. Also if you have any question or suggestions, please post it!.