dalehay.com - Create your own Image Uploader

Digg! This Page

Create your own Image Uploader

Introduction
So you want to create your own image uploader?? Maybe for a image hosting website? If you are unsure what I'm on about then it's simple... a visitor comes onto your website, uploads an image through a form then gets told where it's located so they can use it on their own site.

What You Need
- A Web Server
- PHP
- Notepad (or a PHP Editor)

Part 1
Ok so we're going to have 2 files for our project. A 'index.php' and 'upload.php' file. The 'index.php' file will have the form on it which will allow the visitor to upload a file through a form and then the 'upload.php' file will process the file that has been uploaded and show the results.

Part 2
So lets start with the 'index.php' file.. I am not going to be doing the styling of the site, just the coding of the main script.. you can design what you like. So first of all we need to make the "form" for people to upload the images. To do that we need to firstly make a file called 'index.php' and type in:

<form action="upload.php" method="POST" enctype="multipart/form-data">

The action bit tells the form where to go once the submit button is pressed. The method bit tells us how to send the data, either GET (through the browsers varibles) or POST (through your hosts temporary file) and enctype tells the form what type of data is going through.

Next we need to make the box where people can select an image:

<input type="file" name="image">

The type bit tells your page what type of box it'll be (either text, password, button, submit, reset or file) with it as file you will see a "browse" button added at the end of it. The name of the form is important as that will be passed through to the next page.

Finally we just need to add the last two bits, which is the submit button (which we'll put the text on the button as "Upload Image") and then closing the form.

<input type="submit" value="Upload Image">
</form>

The type on the button is submit which tells your page that it will send the information through when clicked and the value is what text is to be shown on the button, which we have told it to be upload image. Then the backslash-form is just the ending of the form.

Part 3
Now for the final bit which will be all the PHP that is used to send the image from a visitors computer to your website - create and save this file as 'upload.php'.

<?php
// Turn the image that is being uploaded into a varible.
$imagename = $_FILES['image']['name'];

// Copies the image from your web servers temporary file to your web server
copy($_FILES['image']['tmp_name'], "./hostedimages/$imagename");

// Send out a message afterwards to say it has been uploaded
echo "Your image has been uploaded and can be viewed here: <br>";
echo "http://www.dalehay.com/hostedimages/$imagename <hr>";
echo "<b>Preview:</b><br><img src='./hostedimages/$imagename'>";
?>

Pretty small output however it works and this is how. On the 'index.php' page we called the input box 'image' so when the file gets sent to your 'upload.php' page it has the global name of 'image' - in this script we use the extra bits called 'name' (the exact file name of the image [eg; MyCar.jpg]) and 'tmp_name' (which is as a temporary file [eg; file0001.tmp]). The copy() PHP tag has two properties.. the first is the location of the temporary file (hence why we used ['tmp_name']) and then the second property is where the image is being sent to (in our example it's to a folder called 'hostedimages' and after you see we are calling the varible $imagename which is just reading the ['name'] value of the image).

Part 4
Now that is done, all you need to do now is upload both files and create a directory on your server called 'hostedimages' (or whatever you want to have it as) then CHMOD that folder to 777 (You need to CHMOD it otherwise nothing can be sent to that folder). Then try it out... it work.

Problems
Because this is a small quick and dirty method of uploading images, visitors can still upload other files beside images - so maybe expand on this by using the ['type'] value in the 'upload.php' page. Another problem is if a person uploads a file called 'cat.jpg' and then two days later another person uploads a file called 'cat.jpg' it will overwrite it and remove the previous image - so maybe get the file name to start with time() then the filename.

Comments:

25th Mar 2008 0:58

how do you chmod 777 ?

By

25th Mar 2008 1:04

how do you chmod 777 ?

By

25th Mar 2008 20:24

If you use an FTP program then right click the destination folder and select CHMOD. Then tick all the boxes to total it all to 777 (or 0777 on some things)

By Dale Hay

15th Apr 2008 20:40

Warning: copy(./hostedimages/semnatura1rj9.jpg) [function.copy]: failed to open stream: No such file or directory in /home/respawn/public_html/imghost/upload.php on line 6
Your image has been uploaded and can be viewed here:
http://www.dalehay.com/hostedimages/semnatura1rj9.jpg

By SuSp3k7uL

15th Apr 2008 21:29

SuSp3k7uL - You made a directory called "hostedimages" ??

By Dale Hay

18th Apr 2008 11:20

chmod - tis a linux thing. if your using windows, shouldnt matter.

By Pete

18th Apr 2008 22:01

On Windows then right clicking the folder and going to Permissions should be the alternative to CHMOD.

By Dale Hay

9th Aug 2008 23:42

you can chmod by going into your favorite ftp client right clicking on the file or folder and eithe rclicking "CHMOD" or "ANTRABUTES" and you will see 9 boxes and a place to type in numbers... every number was so many boxes it ticks!

By kyle

9th Aug 2008 23:56

Some FTP clients have 12 boxes - allowing the number to be 0777, however I never fiddle with the first number, only the last three.

By Dale Hay

10th Aug 2008 17:56

How would you use the time() function, possibly also the date() function in this script

Thanks

By Martyn Breckenridge

10th Aug 2008 18:19

This script only uploads pictures, but if you wanted it to record what time they uploaded then I'd say after the "copy()" function make a connection to the database and get it to save the image name along with the "time()" function too. Then when viewing the image, use "date("jS F Y h:i",$time)" to get the date.

By Dale Hay

10th Aug 2008 18:33

I was actually referring to the part you wrote under problems:

"Another problem is if a person uploads a file called 'cat.jpg' and then two days later another person uploads a file called 'cat.jpg' it will overwrite it and remove the previous image - so maybe get the file name to start with time() then the filename."

I was wondering how to do that,

thanks,

martyn

By Martyn Breckenridge

10th Aug 2008 20:06

Ahh,

To do that, then instead of having:
copy($_FILES['image']['tmp_name'], "./hostedimages/$imagename");

Write it like this:
copy($_FILES['image']['tmp_name'], "./hostedimages/".time()."$imagename");

That would stop things getting overwritten. The only chance of something being overwritten is if someone uploads a file of the same name at exactly the same second - which I don't even think MySpace would have that problem. :)

By Dale Hay

10th Aug 2008 20:47

Thanks dale, got the script working perfectly.

do you mind if i have a link back to your site on mine, seeing as you wrote more or less all the code i used?

Martyn