Tutorial: Integration Avatar/Picture Uploads to User Profile

[pbu]

Anyway, i coded a great image upload script years ago and honestly i totally forgot about it and its just lying around wasted. I thought i could bring that script back and can be easily integrated to php login script. You can use it as avatar or profile feature.

Goal

To let the users upload a picture or avatar to their profile page. We automatically shrink the uploaded image to desired dimensions. I am keeping it as simple as possible.

Features

- Just upload to any picture and the script will auto shrink it to your desired dimensions (100x100px for avatars) or you can specify the sizes.

- Added some security features as well to image upload script.

Requirements

1. You will need php login script
2. Download the PHP Thumbnailer class. You can refer to documentation there.

Installation

Before you mess around the code, carefully backup the mysettings.php

Step 1

First create a database field avatar in users table. It can be varchar(220)

Step 2

unzip the phpthumbnailer class, name it as phpthumb and place it within phplogin folder.

Step 3

Create uploads folder within your php login script folder and you have to make it as 777 writable permissions to store images. To disable dangerous script executions you will need to create .htaccess file and place the following code in .htaccess file

Options -Indexes
Options -ExecCGI
AddHandler cgi-script .php .php3 .php4 .phtml .pl .py .jsp .asp .htm .shtml .sh .cgi

Step 4

Open mysettings.php and place the following html code. The form should be separately just like update passwords.

PHP Code:

<form action="mysettings.php" method="post" enctype="multipart/form-data" name="form2" id="form2">
          <p> 
            Image Upload 
            <input type="file" name="ifile">
            <input type="hidden" name="MAX_FILE_SIZE" value="500000" />
            <input name="Submit" type="submit" id="Submit" value="Upload">
          </p>
        <p><strong>Max 100 Kb, JPEG/PNG only (100x100 pixels maximum) </strong></p>
      </form> 


You can specify the MAX_FILE_SIZE value to restrict maximum file upload size. In this case we restrict the size to 500kb

5. Open mysettings.php,place this php code somewhere on top.

PHP Code:

<?php 
/*************** AVTAR UPLOAD SCRIPT ******************************/
//Requirements: PHP Thumbnail class (http://phpthumb.gxdlabs.com/)
// License: Free
/***********************************************/
if($_POST['Submit'] == 'Upload') 
{ 
// This is the unique user_id
$id = $_SESSION['user_id'];

if (!empty ($_FILES['ifile']['tmp_name']))
{
/* Thumbnail class is required */
include_once('phpthumb/ThumbLib.inc.php');

/* GetImageSize() function pulls out valid info about image such as image type, height etc. If it fails 
then it is not valid image. */

 if (!getimagesize($_FILES['ifile']['tmp_name']))
  { 
   die("Error - Invalid Image File.");
  
  }

$imgtype = array('1' => '.gif', '2' => '.jpg' , '3' => '.png');
  
  // extract the width and height of image 
  list($width, $height, $type, $attr) = getimagesize($_FILES['ifile']['tmp_name']);
 
 // Extract the image extension
  switch ($type)
  {
  case 1: $ext='.gif'; break;
  case 2: $ext = '.jpg';break;
  case 3: $ext='.png'; break;
  }
  // Dont allow gif files to upload as it may  contain harmful code
  if ( $ext == '.gif') {
    die("Sorry - GIF not allowed. Please use only PNG or JPEG formats");
    }
  
 /* Specify maximum height and width of users uploading image */
   if ($width > 1000 || $height > 1000)
  {
   die("ERROR: Maximum width and height exceeded. (max 1000x1000 pixels)");
   
  }
  /* Specify maximum file size here in bytes */ 
  if ($_FILES['ifile']['size'] > 500000 )
    {
    die("Error: Large File size. (max 500kb)");
    
    } 
    /******** IMAGE RESIZING *********************/
    // Before we start resizing, we first have to move the image file to server
    // save it there under a unique name and then do the final resizing and save the resized image.
    
    // Specify which directory you want to upload. It should be a subfolder where the script is present
    // We also generate a unique name for picture FILE-USERID-XXX where xxx is random number
    // The uploads folder must have writable permissions.
    $uploaddir = 'uploads/';
    $secondname = rand(100,99);
    $uploadfile =  $uploaddir . "img-$id-$secondname". $ext;
    
    if (!move_uploaded_file($_FILES['ifile']['tmp_name'], $uploadfile ))
     {
       die("Error moving the uploaded file");
     }
    
    $thumb = PhpThumbFactory::create($uploadfile);
    //specify the height and width of avatar image to resize
    $thumb->resize(100,100);
    $thumb->save($uploadfile);
    //$thumb->show();
    //MySQL query to update avatar filename in the database. You need to create a field avatar
    mysql_query("update users set avatar='$uploadfile' where id='$id'");
    
    //$thumb->destruct();
    }
    
}    
?>

The default resize is 100x100. You can change it by altering this line

$thumb->resize(60,60);

We only allow JPG, PNG files and GIF not allowed from security point of view and it can contain harmful code. If you want to allow GIF, just remove these lines.

PHP Code:

// Dont allow gif files to upload as it may  contain harmful code
  if ( $ext == '.gif') {
    die("Sorry - GIF not allowed. Please use only PNG or JPEG formats");
    } 


I have shown the very basic usage and you may to alter the die() commands specific to your needs.

If you closely observe, we are using this code to update the avatar filename to the user database. This is a simple mysql query which updates it. We are storing the image by generating a unique name IMG-USERID-xx and where xx are random nos.

//MySQL query to update avatar filename in the database. You need to create a field avatar
mysql_query("update users set avatar='$uploadfile' where id='$id'");

Step 5:

Finally to showup avatar in mysettings.php, place this html code anywhere you want.

PHP Code:

<img src="<?php echo $row_settings['avatar']; ?>">

Go through the commented php code, to tweak this script more. If upload is successful you will see the images in uploads folder.

[andykhor]

thanks PBU for the detail instructions, i will try it later~

[daviganth]

Step 5:

Finally to showup avatar in mysettings.php, place this html code anywhere you want.

PHP Code:

<img src="<?php echo $row_settings['user_profile']; ?>">

I tried to integrate the script and i had a few problems. I am not very skilled in php but this is what i found:
$row_settings['user_profile'] - there is no such field ( user profile ) in database so there was no way for the picture to show. I manage to go arround this creating another variable like this:
$src=$row_settings['avatar'];
Make sure tu put the $src=$row_settings['avatar']; insede the while like this:
<?php
while ($row_settings = mysql_fetch_array($rs_settings)) {
(other code)
$src=$row_settings['avatar'];
}
?>
Next u should put <img src="<?php echo $src; ?>" /> where u want the picture to show but not inside a <?php .... ?> code.
Hope this helps and i wasnt mistaking about my interpretation of original code

[pbu]

@daviganth yes you are right, its $src=$row_settings['avatar'];

i changed the above code.

[Renegade]

I try this code but give-me some errors.

Fatal error: Uncaught exception 'BadMethodCallException' with message 'Call to undefined method/class function: destruct' in C:\AppServ\www\phpthumb\ThumbBase.inc.php:215 Stack trace: #0 [internal function]: ThumbBase->__call('destruct', Array) #1 C:\AppServ\www\mysettings.php(86): GdThumb->destruct() #2 {main} thrown in C:\AppServ\www\phpthumb\ThumbBase.inc.php on line 215

if delete $thumb->destruct(); dont have this error.

But the image dont apear in index.php.

someone help?

Thanks

[pbu]

yes right, remove $thumb->destruct(). i have commented out in the code.
Is the upoaded image appearing on uploads folder? if yes, then everything is working properly.

[Renegade]

Is the picture appearson uplaod folder, but with this code the image dont appears to the user .

PHP Code:

<img src="<?php echo $row_settings['avatar']; ?>">

where is the error?

[pbu]

Originally Posted by Renegade

where is the error?

This means the script after upload is not updating the image path in database. Look for this line, it should be session user_id not just id.

PHP Code:

mysql_query("update users set avatar='$uploadfile' where id='$_SESSION[user_id]'"); 


[Renegade]

pbu thanks for your help, you are the best.

But i solved the problem this way.

In index.php or mysettings.php i put this code at the top of the page.

PHP Code:

/************ Avatar Capture**************/
$image = mysql_query("select avatar from users where id='$_SESSION[user_id]'");
$row_settings = mysql_fetch_array($image);
/*******************************************************/ 


And had this where u want the picture to show.

PHP Code:

<img src="<?php echo $row_settings['avatar']; ?>">

Only thisway the avatar show to the user.

Now, i detect another problem, if the image are *.gif with animation, when upload and resize the animation is lost, it show the avatar to user but without animation.

Sorry my bad english, can you help?

Thanks

[pbu]

Now, i detect another problem, if the image are *.gif with animation, when upload and resize the animation is lost, it show the avatar to user but without animation.

GIF animation files wont work properly when resized, which is why you should allow users to upload JPG/PNG type.

[aidan]

How can I view random images each time for a user. For example it would look something like this:

PHP Code:

<image src="<?php [userid].ANYTHING ?>" />

Then every time the user reloads the page a different image (or just the same if theyve only uploaded one image) will be shown each time.

Any idea how to do this?

[JamieR]

Hi,
the script was previously working fine for me. All of sudden today it stops working and is returning this message:

PHP Fatal error: Class 'PhpThumb' not found in /home/xxx/public_html/xxx/phpthumb/thumb_plugins/gd_reflection.inc.php on line 179

Anyone have an idea what could be causing this?

Thanks,.

[bird83]

instead of making a thumbnail... can't you just specify the image size in the href? im new to coding, so I was just wondering if this would be a more simple alternative.

[pbu]

Originally Posted by bird83

instead of making a thumbnail... can't you just specify the image size in the href? im new to coding, so I was just wondering if this would be a more simple alternative.

you can but it will look ugly.

[rli777]

Originally Posted by Renegade

Is the picture appearson uplaod folder, but with this code the image dont appears to the user .

PHP Code:

<img src="<?php echo $row_settings['avatar']; ?>">

where is the error?

The picture is not appear in the folder 'uploads'. Can you help me?

[pbu]

Originally Posted by rli777

The picture is not appear in the folder 'uploads'. Can you help me?

have you checked the upload folder permissions. it should be 777 if its on server or on local windows it is auto writable.

Another reason could be the

1. script is not writing to folder. check the code.
2. check the full file path.

[PhantomDC]

Firstly I would like to thank your for all your code so far its been cake to implement and
Im a PHP noob so thanks
In reference to this script im getting an error when uploading the picture
The DB is all setup
The image does upload to the folder uploads but it will not display and when you hit upload
you get the error


Warning: mysql_query() [function.mysql-query]: Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2) in /home/c/ca/#######/######/#####/mysettings.php on line 82

This is line 82 on the mysettings.php file

mysql_query("update users set avatar='$uploadfile' where id='$id'");


Any Ideas?
Please help I feel like im so close!!!

[PhantomDC]

Originally Posted by PhantomDC

Firstly I would like to thank your for all your code so far its been cake to implement and
Im a PHP noob so thanks
In reference to this script im getting an error when uploading the picture
The DB is all setup
The image does upload to the folder uploads but it will not display and when you hit upload
you get the error


Warning: mysql_query() [function.mysql-query]: Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2) in /home/c/ca/#######/######/#####/mysettings.php on line 82

This is line 82 on the mysettings.php file

mysql_query("update users set avatar='$uploadfile' where id='$id'");


Any Ideas?
Please help I feel like im so close!!!

I fixed this issue by placing the code in another section of the mysettings script

I also had to use this script

$src=$row_settings['avatar'];
Make sure tu put the $src=$row_settings['avatar']; insede the while like this:
<?php
while ($row_settings = mysql_fetch_array($rs_settings)) {
(other code)
$src=$row_settings['avatar'];
}
?>

to allow the avatar to display

Thanks everyone all working now

[rli777]

Originally Posted by pbu

have you checked the upload folder permissions. it should be 777 if its on server or on local windows it is auto writable.

Another reason could be the

1. script is not writing to folder. check the code.
2. check the full file path.

Thank you... but still no working

Yes the folder have permissions.
Now I can see the image in the folder, but the script no show the image.

Here is part of the script

Thank you for your help!!!

PHP Code:

<!-- ************** IMAGE UPLOAD  ******************** -->
      <h3 class="titlehdr">Image Upload</h3>
      <form action="mysettings.php" method="post" enctype="multipart/form-data" name="form2" id="form2">
        <table width="80%" border="0" align="center" cellpadding="3" cellspacing="3" class="forms">
          <tr> 
            <td>          
    <p> 
            Image Upload 
            <input type="file" name="ifile">
            <input type="hidden" name="MAX_FILE_SIZE" value="500000" />
            <input name="Submit" type="submit" id="Submit" value="Upload">
          </p>
           </td>
          </tr>
        </table>
        <p>&nbsp; </p>
        <p><strong>Max 100 Kb, JPEG/PNG only (100x100 pixels maximum) </strong></p>
      </form>  
<!-- ************ END IMAGE UPLOAD   ************** -->

<!-- ************** SHOW IMAGE    **************** -->

    <?php
    mysql_query("update users set avatar='$uploadfile' where id='$_SESSION[user_id]'");  
    ?>
        <h3 class="titlehdr">Show Image</h3>
        <p> 
        <img src="<?php echo $row_settings['avatar']; ?>">
        </p>


<!-- **************  END IMAGE   ***************** -->

[pbu]

Yes the folder have permissions.

Now I can see the image in the folder, but the script no show the image.

Then your problem is solved almost 90%.what is the name of folder you store images? i assume it is uploads and you have to specify the path while showing the image. see the code below and notice i have mentioned the upload folder path.

PHP Code:

<img src="uploads/<?php echo $row_settings['avatar']; ?>">