In this week's screencast, I'll show you how to upload files and then have PHP dynamically create a thumbnail. Whether you're building an ecommerce site, or just a simple gallery, these techniques will absolutely prove to be useful. If you're ready for your "spoonfed" screencast of the week, let's get going!
*Note - There have been a few slight changes to the code after some additional thinking and some great suggestions. Don't worry, very little has changed. Just some cleanup. You can review the changes below, and/or download the source code.
The Simple Config File
The first step is to create a simple config file where we can store a few variables. By placing these in their own file, we can easily make changes to our code without having to edit many lines.
$final_width_of_image = 100; $path_to_image_directory = 'images/fullsized/'; $path_to_thumbs_directory = 'images/thumbs/';
- $final_width_of_image - This variable will store the width of our thumbnail.
- $path_to_image_directory - This stores the path to our full sized images folder
- $path_to_thumbs_directory - This stores the path to our full thumbnails directory
Save this file as 'config.php' and place it in the root of your folder.
The HTML
Next, create a new page called "index.php" and paste the following.
<?php
require 'config.php';
require 'functions.php';
if(isset($_FILES['fupload'])) {
if(preg_match('/[.](jpg)|(gif)|(png)$/', $_FILES['fupload']['name'])) {
$filename = $_FILES['fupload']['name'];
$source = $_FILES['fupload']['tmp_name'];
$target = $path_to_image_directory . $filename;
move_uploaded_file($source, $target);
createThumbnail($filename);
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<title>Dynamic Thumbnails</title>
</head>
<body>
<h1>Upload A File, Man!</h1>
<form enctype="multipart/form-data" action="" method="post">
<input type="file" name="fupload" />
<input type="submit" value="Go!" />
</form>
</body>
</html>
First, scroll down a bit to the body tag. To keep things as bare-bones as possible, I've created an extremely simple form. But it will get the job done just fine.
<form enctype="multipart/form-data" action="" method="post"> <input type="file" name="fupload" /> <input type="submit" value="Go!" /> </form>
Any time that you're going to be working with the "file upload" input type, you need to add an "enctype" attribute to the form tag.
<form enctype="multipart/form-data"
Rather than posting to a different page, we'll just write the code in our main document. To do that, we'll set the action attribute equal to this page.
action="<?php print $_SERVER['PHP_SELF']
Now, scroll back up to the PHP code at the top. We're requiring two files. The first is the config file that we just created. The second one is "functions.php" - which we'll create shortly.
Next, we're checking to see if the page has posted back. If it has, we'll then check to see if the file that the user chose was either a "jpg", "gif", or "png". We can do this by checking the file name against a regular expression.
if(preg_match('/[.](jpg)|(gif)|(png)$/', $_FILES['fupload']['name']))
To learn more about regular expressions, watch this screencast.
Moving along, we're creating a few variables.
- $filename - Stores the name of the file that the user has chosen to upload.
- $source - When the submit button is clicked, the file will be saved into a temporary directory. This variable will store that path.
- $target - This will store the path of where the uploaded image should be saved.
Saving the File
The final step is to move the file from the temporary directory into our "images/fullsized" folder. We can do this by calling the move_uploaded_file() function. We'll pass in two parameters. The first one needs to know the path to the temporary folder. The second needs to know where to save the file. ($source and $target, respectively)
move_uploaded_file($source, $target);
Creating the Thumbnail
Rather than store all of the code in our index.php page, let's create another page called "functions.php". Create and open this new file and write a new function called "createThumbnail()".
function createThumbnail($filename) {
require 'config.php';
if(preg_match('/[.](jpg)$/', $filename)) {
$im = imagecreatefromjpeg($path_to_image_directory . $filename);
} else if (preg_match('/[.](gif)$/', $filename)) {
$im = imagecreatefromgif($path_to_image_directory . $filename);
} else if (preg_match('/[.](png)$/', $filename)) {
$im = imagecreatefrompng($path_to_image_directory . $filename);
}
$ox = imagesx($im);
$oy = imagesy($im);
$nx = $final_width_of_image;
$ny = floor($oy * ($final_width_of_image / $ox));
$nm = imagecreatetruecolor($nx, $ny);
imagecopyresized($nm, $im, 0,0,0,0,$nx,$ny,$ox,$oy);
if(!file_exists($path_to_thumbs_directory)) {
if(!mkdir($path_to_thumbs_directory)) {
die("There was a problem. Please try again!");
}
}
imagejpeg($nm, $path_to_thumbs_directory . $filename);
$tn = '<img src="' . $path_to_thumbs_directory . $filename . '" alt="image" />';
$tn .= '<br />Congratulations. Your file has been successfully uploaded, and a thumbnail has been created.';
echo $tn;
}
We'll start by requiring the "config.php" file once again. Next, we'll check to see whether the user selected a "jpg", "gif", or "png". We must do this because PHP requires a different function depending on the file: "imagecreatefromjpeg", "imagecreatefromgif", "imagecreatefrompng".
After that, we must store the width and height values of the image that the user chose to upload. We can do this by calling "imagesx", and "imagesy", respectively.
$ox = imagesx($im); $oy = imagesy($im);
Next, we'll create two more variables that will store the width and height values for the thumbnail that will soon be created.
- $nx - is equal to the value from our config file: 100
- $ny. We'll need to run some simple math to find the correction proportionate height.
$nx = $final_width_of_image; $ny = floor($oy * ($final_width_of_image / $ox));
ImageCreateTrueColor
In our case, we're passing in the "$nx", and "$ny" variables that we just created.
Image Copy Resized
imagecopyresized($nm, $im, 0,0,0,0,$nx,$ny,$ox,$oy);
Saving the Thumbnail
The final steps require that we check to see if a "thumbnails" folder exists. If it doesn't, we'll create it by using "mkdir". Then, we'll output our new image to the thumbnails folder.
if(!file_exists($path_to_thumbs_directory)) {
if(!mkdir($path_to_thumbs_directory)) {
die("There was a problem. Please try again!");
}
}
Finally, we need to echo out the thumbnail to show the user that his image was uploaded successfully.
$tn = '<img src="' . $path_to_thumbs_directory . $filename . '" alt="image" />'; $tn .= '<br />Congratulations. Your file has been successfully uploaded, and a thumbnail has been created.'; echo $tn;
Finished
Well done! This screencast was somewhat hastily done - because of time constraints. You might want to clean up the code a bit and a bit more error handling.
If you wish to take things further, see if you can figure out how to crop the images as well! As always, I'm more than open to refinement and suggestions!
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Bouke Regnerus November 20th
nice work man!!!
( )Timmy November 20th
Awesome! Thanks dude. This is exactly the kind of thing I was looking for.
( )Chris Gedrim November 20th
I’ve literally just written some php to do exactly this for a client’s portfolio gallery!
Could you not have streamlined your code thus:
[code]
if(!file_exists($path_to_thumbs_directory)) {
if(!mkdir($path_to_thumbs_directory)) {
die("There was a problem.");
}
}
imagejpeg($nm, $path_to_thumbs_directory . $filename);
( )$tn = '';
$tn .= 'Congratulations. Your file has been successfully uploaded, and a thumbnail has been created.';
echo $tn;
[/code]
Jeffrey Way November 20th
@Chris – Very good point. If you watched this screencast, you can see that I wasn’t happy with that. Good suggestion. I’m going to update the post.
( )Simon Ong November 20th
You’re just in time! I was looking for a way to do this automatically.
Kudos!
( )Gabe November 20th
Seriously, this is hella useful. Stumled and Delicious’d.
( )Andrew Waters November 20th
This is absolutely perfectly timed for a project I’m working on! Thanks guys…
( )Javier Centeno November 20th
Great tutorial. What’s the name of the editor you’re using? I want to check it out.
( )Lamin November 20th
Great post but may i suggest that a better title for this post could be “How to Dynamically Create Thumbnails With PHP” because the current title seems to suggest that this approach would work for everyone.
( )Jeffrey Way November 20th
@Javier – It’s called “PHP Designer 2008″. Just google it. You can download a free 30 day trial.
I’m liking it so far!
( )Dan November 20th
Thx for this. Love it.
( )Richard November 20th
Great tutorial, but in a follow up I think you should cover some of the security implications of uploading the file in this way.
( )Eric Thayne November 20th
Yes, I needed this! Thanks!
( )Dylan November 20th
There are some changes/improvements to the code I found:
$_SERVER['PHP_SELF'] might not always be what one expects (read the docs for more inf). $_SERVER['SCRIPT_NAME'] is a safer option. I always just leave the action attribute blank & it seems to work – not sure how proper that is though.
The form is missing the (supposedly) required MAX_FILE_SIZE hidden field. Again, the docs have more info.
getimagesize() is a much better way of a) determining what type of image the file is and b) getting the image dimensions. File extensions can be spoofed and the regex used can be rendered useless quite easily. getimagesize() is tougher to fool. Also, in createThumbnails(), one call to getimagesize() can return the IMAGETYPE_XXX constant (rather than needing to run 3 costly regex calls), as well as the image dimensions (rather than needing to call imagesx() & imagesy())
imagecopyresampled() creates much superior thumbnails than imagecopyresized(). imagecopyresized() doesn’t create a new colour palette, so your edges will look jagged. imagecopyresized() is like resizing a GIF in photoshop – the colour palette stays the same. imagecopyresampled() resamples the photo & interpolates new colours as necessary.
( )Keith November 20th
Fantastic Stuff, Thanks for this Jeff, I’d say these screencasts take their toll
( )Ben Reid November 20th
Awesome! :O
( )Kim Dolleris November 20th
Been looking for one of theese for ages! Thanks a bunch!!! Made my day!
( )Thomas Milburn November 20th
Brilliant stuff. I would agree with the changes Dylan has suggested. I would make one other change to this script. I would set a maximum height dimension as well so that thumbnails aren’t too tall.
Also the link to move_uploaded_file() is blank.
( )pat March 6th
how do u set max height?
( )Swapnil Sarwe November 20th
Nice tuts, for all the beginners. Can have it in store of library as a regular used functionality.
( )Good work. Thanx a lot.
Eduardo November 20th
Very cool and useful! Thanks again Jeff!
( )ashvin November 20th
Thanks! very very useful!
( )Dan November 20th
B rilliant!
( )Furley November 20th
this functionality is what got me into php many moons ago.
( )Pontiac November 20th
Very useful tutorial, thanks for it!
( )Miles Johnson November 20th
Its a decent way to create thumbnails but youve also forgot support for png/gif transparencies and even animated gifs.
( )insicdesigns November 20th
awesome article. very useful tips.
( )Daniel November 20th
My hero!
( )Moksha November 20th
Please make this also in asp.net it will be great help to all asp.net programmer, i have done it, but its always nice to learn from master.
( )Pedro Magalhães November 20th
Fantastic job! I loved it
thanks
( )Cheers November 20th
Why not making an URL to call which returns the resized image ?
Somthing like : http : // http://www.my url .com / Resize / Resize.php?image=PathToImageOnTheWebServer&Width=100px
( )Cheers November 20th
@moksha : send me your mail and I send u a VB.net ASPX sample page.
( )send @ a89osy5pdxfjhs9@jetable.net (u have 8 days before this temp mail expires)
Gustavo Macedo November 20th
Great post, but i prefer to manipulate the images for the binary way.
( )mike November 20th
Off topic but…
Jeffrey, any chance of you picking up the learn php from scratch series? it’s been over 2 months since part 2 was published….I know the other guy that took over was going through some personal stuff, I was just curious if that series is ever going to pick up again?
( )Stefan Nilsson November 21st
wow this is so awesome.
But how do you do if you would like to create thumbnails of documents? Like in leopards quick look where you can see the document without opening it (ok there you can scroll through the documents, but let´s take it one step at a time).
( )Ben Blogged November 21st
Great Post
( )milton November 21st
good stuff
( )Lex Beelen November 21st
This not save :S. Some points
- File Size. Limiet your files
- is_uploaded_file function. Use it http://nl3.php.net/manual/en/function.is-uploaded-file.php
- File Type’s. Don’t use this. if(preg_match(’/[.](jpg)|(gif)|(png)$/’, $_FILES['fupload']['name'])) . But do it like this:
$mimetype = strtolower($_FILES['fupload']['type']);
$img_mimetypes = array(
“image/jpeg”,
“image/jpe”,
“image/jpg”,
“image/pjpeg”,
“image/gif”,
“image/png”,
“image/x-png”
);
if(!in_array($mimetype, $img_mimetypes))
{
echo ‘go’;
}
( )Brent November 21st
What do you do if the user uploads an invalid image with the .jpg extension. Is there any code in there to check for invalid images being uploaded to your server? This code only checks that it has the proper extension. Won’t this code choke if the file is not a valid image file?
( )bernk November 21st
Also, it may be the case that you’ve done everything right and still your file isn’t uploading…
Make sure the permissions of the directory into which you are trying to upload allow it!
This got me a couple of times ; )
( )bernk November 21st
@Lex Beelen
The mimetype method isn’t bulletproof either as it isn’t checked on the PHP side, but rather provided by the browser—if at all.
( )bernk November 21st
@Brent
I guess a combination of Jeff’s and Lex’s checks is a good start but not an absolutely secure solution—but what is?! ; )
( )Thomas Milburn November 21st
@Bernk, Brent and Lex.
The best way to find out if a file is a valid image is to use the getimagesize() function. This will check if the image is valid and will return what type of image it is. Mime types and extensions can easily be forged. The getimagesize() function generates an error if it isn’t a valid image so the function should be prefixed with the error control operator (@) to suppress the error.
The extension of the file should also be checked though because servers process files depending on their extensions. eg. .php files are executed and .gif files are given the mime-type header image/gif
( )Roshan Bhattarai November 21st
First point……… if you just have to create thumbnail then I don’t you really need to use move_uploaded_file() function……..just create the thumbnail using $_FILES['fupload']['tmp_name']
seond one……better to use imagecopyresampled instead of imagecopyresized if you really need a quality thumnail
( )Lex Beelen November 21st
@Thomas
You are right. I have tried to get the cookie to place this code at the bottom from the image :
<?php
for ($i=0; $i<4; $i++)
print ‘alert(document.cookie);’;
?>
I other option: Is mayby to check if you can edit the image before you upload it?
if(@imagecreatefromjpeg($file))
{
return TRUE;
}
else
{
return FALSE;
}
Thanks for the tip
. Security is very important.
( )vp November 22nd
Great tutorial!
Is there a way to allow the user to create their own folders on the server? For instance if the user finished with one gallery and he wants to start another gallery?
( )Digital Revolutions November 22nd
Thanks for sharing…
( )Austin Biggs November 23rd
I was wondering about how to change a filename (for original & thumbnail) on upload based on a random number.
( )Thomas Milburn November 23rd
@vp
( )You can add folders using the mkdir() function. This isn’t recommended unless you know what you’re doing since there are a number of security issues regarding creating directories.
kareem November 23rd
this is wonderful tutorial i will put acopy of this lesson on
( )my site here
http://www.as7ap4you.com
lespaulsf November 25th
Very helpful a great learning experience. So after looking at the comments thus far and reading about the “imagecopyresized” and “imagecopyresampled” they seem to take the same parameters. Maybe Jeffery just mistyped the PHP function or meant to use the “imagecopyresampled”. Anyway great job!
( )tasarhane November 26th
Nice, this is really useful. Bookmarked..
( )Patrick Turner November 26th
so if there is already an image in the folder with that name what will happen?
( )ali November 28th
this is wonderful tutorial .. i read it 3 times and get a fantastic results and sure i put a
copy of this lesson on my site here
http://www.majlesnet.com
( )bernk December 2nd
Another problem with the preg_match in this tutorial is that uppercase extensions such as .JPG will fail, even if they are a perfectly good image.
Thought that might save someone a few hours of beating their head against their desk.
( )bernk December 2nd
Also for anyone intersted in sharpening their image once it has been uploaded check out imageconvolution(); (PHP 5+)
( )Ben Blogged December 2nd
Jeffery or Bernk,
Any chance of expanding on how to improve the resolution of the thumbs, seem to always come out pixelated?
Jeffery… love the tut, thanks.
( )david December 2nd
http://us2.php.net/imagick
ImageMagick will do a much better job with far less code. You can even do sharpening and other effects.
There is also a php function for determining file type and extension. I don’t know why the above code got though with so many obvious mistakes.
( )coven December 6th
this is wonderful tutorial .. i read it 3 times and get a fantastic results and sure i put a
copy of this lesson on my site here
http://www.ac-coven.net
( )Michael December 9th
Does this crop the thumb? Or just resize? I’m looking for something to crop the image to 100×100, everything i’ve found was rather difficult to implement with my current code.
( )andrulee December 12th
very interesting. Anything related to digestion is a pretty personal topic. If you’re interested in more info based on mass response to this, check out this watch bones page
( )luan December 13th
Hi I’m new to this. But I was wondering what I would change to allow the users to browse and get a file and send the file in a form to be received in an email. I guess kinda like how an email attachment would work.
( )John December 15th
Hi i have just used your code to create a mock up gallary website, but i was wondering if it is posible to change the code so that the user would be able to upload more than one image at a time and also to be able to organice the images into sections, i guess that this would be done by using arrays and also by using sub folders within the thumbnails directiory and or the image directory. Please could some one help get back to me with this as soon as posible.
( )Ally December 15th
How can I allow a larger file to be uploaded?
( )randy December 15th
Where do you go to set permissions. The code will work on my site server, but not on wamp..
( )Stef December 16th
Nice tut Jeffrey,
Only the scaling doesnt work. If i upload an image that is 600 * 480 px. The thumb will get 100 * 100 px; Thomas said anything about getimagesize() but how do i apply.
( )TonyG December 17th
For some reason the file is moving to the correct location but not creating a thumb. I get no errors either? Any ideas as to why it will move the file but not resize it?
( )tnt December 27th
very nice work… was very helpful….
( )Sharmila February 1st
Nice tutorial,very useful and understanding to the php beginners like me.
( )Dan February 6th
Well. nice one!
Where can i download the source code? – I can’t find it on your page.
( )Can anyone guide me please
salman February 7th
hi
( )i like your tutorial. but can you tell how we can create more than one thumnail images.
for example, if i upload 1024×768 size image, it saves on server, also a thumnail of 120×90 generates and saves on the server with the help of the above script. I also want to create and save to server another image sized 800×600.
Please tell me how to do this.
Phil Gapp February 16th
Hey all!
To begin, great job! Love all the community involvement and different code to build upon the solid foundation. I’m still first month w/ php and this was fun and productive for me.
I am, however, continuing to experience the issue with the thumbnail error message. I have apache and php running on a local drive for dev. purposes, and all permissions are wide open. Also the code looks solid, but I may be missing something…
Any ideas why this would be failing out on me? If anyone wants my files just email me.
( )Phil Gapp February 16th
Alrighty scratch the last, finally found that my thumb directory variable name was different in config.php than what I had in functions.php… now I get the congratulatory message but a broken image, trying to upload multiple unique .jpg images with same issue, and the images are not appearing in the fullsized nor thumbs directories…
( )Phil Gapp March 5th
Okay so everything is running now, but images are just going in to the root of the images folder named “fullsizedxxxxxxxx.jpg” and “thumbnailxxxxxx.jpg” – rather than being sent to the appropriate fullsized and thumbnail folders specified in the code.
Is this a typo I’m missing or a known issue by anyone…???
( )Aditya March 9th
This is absolutely usefulllll! Thanks!
( )kk March 16th
you shud share the code for download.
( )Kam April 10th
Hi Jeffery,
Great tutorial, but it doesn’t seem to work for me. Do I need a certain PHP version / setting. In addition, I am getting various errors. One of them being:
arning: imagesx(): supplied argument is not a valid Image resource.
Please help.
Best Regards,
( )Kam
sanalturk April 12th
nice tutorials thanks a lot
( )arkinEx April 14th
Nice tutorial, in depth and to the point.
I have found an issue, your regular expressions seem messy:
if(preg_match(’/[.](jpg)|(gif)|(png)$/’, $_FILES['fupload']['name'])) {
Could be transformed into:
if(preg_match(’/\.(jpg|gif|png|jpeg)$/’, $_FILES['fupload']['name']) ) {
* Added case insensitivity & jpeg extension. Also grouped them better and escaped the period which matches any character if left unescaped.
And the best way to validate if its an image or not would be the getimagesize on the uploaded file:
list($width, $height, $type, $attr) = getimagesize( $uploaded_file );
if(preg_match( ‘/^image\/(jpeg|jpg|gif|png)$/’, $type ) ) {
Hope you like my suggestions.
( )Kamal El fatihi April 23rd
you helpet me a lot dear friend…
Thankyou so much
( )sheep May 5th
So I uploaded the files and nothing happens. The page just reloads and images are not added :/
( )jermiane May 18th
nice tutoirla, one month ago i tried this and failed. Tried again it today and it work great, because i increase my php knowledge
( )sergi May 27th
i just paid $9 thinking it would open some jquerified window on this page with the golden ticket to the source code. after all, it explicitly says under the screencast video, in italics:
“*Note – There have been a few slight changes to the code after some additional thinking and some great suggestions. Don’t worry, very little has changed. Just some cleanup. You can review the changes below, and/or download the source code.”
is this an oversight on net tuts’ part?
( )Mohammad Ashfaq June 1st
Nice Work. And bundle of thanks. Dear.
God Bless You
( )Aaron June 17th
What if i want to make my upload component in flash?
( )Luke June 18th
nice work but how can i change? the size of the height, i want my picture thumbnails to be 300 x 300.
Please help me.
( )Steven June 25th
The script looks very nice, but I can’t get it into my theme options page
( )Steven June 25th
From wordpress
( )xtc2xl June 25th
have my man babies! your tutorials make my day heh.
( )thnx for your efforts bro!
guna July 11th
its very nice tutorial.. Thanks…
( )Marcel August 3rd
Thank you for your efforts in setting this up. I must say I was just looking for a sample on how to create a Thumb, and well this is the way to go for me. Many thanks, may the force be with you!
( )Daniel August 25th
A very nice screencast / tutorial. thank you very musch, but I have an issue with uploading image files that are slightly larger in file size (>4Mb ). The settings in php.ini for file upload are modified. Is there a way to fix this for this script?
( )Paul August 29th
Hey Fellas, Im getting an error.
Warning: imagecreatefromjpeg(http://www.imperativedesign.net/images/01494_lonesomehouse_1280×960.jpg) [function.imagecreatefromjpeg]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/content/p/b/a/pbar7268/html/functions.php on line 75
I checked the php.ini file and the allow url open was set to off. I tried the following to no avail.
allow_url_fopen = on
allow_url_fopen = 1
if(!$im){
echo ‘problem creating thumbnail’; die(’Cannot make the thumbnail’);
}
I put this check in after its supposed to create the thumbnails and its telling me there is no im.
Any suggestions?
Thanks
( )jackal_ September 4th
Nice tutorial thanks a lot!
( )mahmood September 30th
thaaaaaaaaaaaaanks
( )