Question

I have a script which uploads an image to the server under the id of the user. To change teh picture the first gets overwritten. The problem is that the old picture, with the dimensions of the new one, shows for a while until they refresh their browser. How can I prevent this from happening?

Script:

function uploadProfilePicture($memberID,$extension)
{
    ##### FIND ERRORS #####
    $error = "";

    // check if larger than 5mb
    $avatar = $_FILES['uploadedAvatar'];
    if( $avatar["size"] > 5000000 ){ //5mb
        $error = SETTINGSphoto_less_5meg;
    }
    //check if member selected a photo
    if( $avatar['name'] == "" ){
        $error = SETTINGSphoto_no_upload;
    }

    //check if photo is of allowed formats
    if(  $avatar["type"] != "image/png"  ){
      if(  $avatar["type"] != "image/gif"  ){
        if(  $avatar["type"] != "image/jpg"  ){
            if(  $avatar["type"] != "image/jpeg"  ){
                if(  $avatar["type"] != "image/pjpeg"  ){
                    $error = SETTINGSphoto_file_type;   
                }
            }
         }
      }
   }

    #### END FIND ERRORS #####      

    ##### DISPLAYS ERRORS ######
    if( $error != ""){
            echo '<span style="background-color:#E05641;" class="pint2">'.$error.'</span>';
    ##### END DISPLAYS ERRORS ######


    ##### PROCESS THUMBNAIL AND UPLOAD PICTURE #####
    }else{



        $ext = substr($avatar["name"], -4); //take off extention. 
        $fileName = $memberID.$extension.$ext; // rename picture with member's ID.w
        unlink("photos/".$memberID.$extension.".jpg");
        unlink("photos/".$memberID.$extension."Thumb.jpg");

        copy($avatar['tmp_name'], "photos/".$fileName); //upload temp

        //create virual image
        if(preg_match('/[.](jpg)$/',strtolower($avatar["name"]))) {  
            $im = imagecreatefromjpeg("photos/".$fileName);  
        } else if (preg_match('/[.](gif)$/', strtolower($avatar["name"]))) {  
            $im = imagecreatefromgif("photos/".$fileName);  
        } else if (preg_match('/[.](png)$/', strtolower($avatar["name"]))) {  
            $im = imagecreatefrompng("photos/".$fileName);  
        } else if (preg_match('/[.](jpeg)$/',strtolower($avatar["name"]))) {  
            $im = imagecreatefromjpeg("photos/".$fileName); 
        }else{
            $im = imagecreatefromjpeg("photos/".$fileName); 
        }

        //get height and width
        $ox = imagesx($im);  $oy = imagesy($im);  

        $final_width_of_image = 200;
        $final_height_of_image = 200;
        //$ratio = $final_width_of_image / $ox; //find ratio to apply to height
        //$nx = $final_width_of_image; $ny = $oy * $ratio; 
        if( $ox < $oy ){

                $nx = 200; 
                $ny = floor($oy * (200 / $ox)); 

        }else{

                $ny = 200; 
                $nx = floor($ox * (200 / $oy)); 

        }


        //$nm = imagecreatetruecolor($nx, $ny);   
        //imagecopyresampled($nm, $im, 0,0,0,0,$nx,$ny,$ox,$oy);    //create new pic    
        $nm = imagecreatetruecolor($nx, $ny);   
        imagecopyresampled($nm, $im, 0,0,0,0,$nx,$ny,$ox,$oy);  

        unlink("photos/".$fileName); //delete temp image

        imagejpeg($nm, "photos/".$memberID.$extension.".jpg",100); //save image // 100 = quality 

        $im = imagecreatefromjpeg("photos/".$memberID.$extension.".jpg");  
        $nm = imagecreatetruecolor(200, 200);
        imagecopyresampled($nm, $im,0,0,0,0,200,200,200,200);
        imagejpeg($nm, "photos/".$memberID.$extension."Thumb.jpg",100);



        $sql = "UPDATE exchange SET photo = 1 WHERE id = '$memberID'"; //update db
        $mysql = new mysql();
        $mysql->query($sql);
        ##### END PROCESS THUMBNAIL AND UPLOAD PICTURE ##### 

        echo '<span class="pint2">'.SETTINGSphoto_chage_success.' <a style="color:#ffffff" href="'.$_ENV['rootURL'].'/'.( in_array($_GET['lang'],$_ENV['supportedLanguages']) ? $_GET['lang']."/" : $nothing).HEADlanguage_exchange.'/id/'.$memberID.'">'.SETTINGSphoto_view_profile.'</a></span>';
        }
}    

Answer 1

The problem is that the old picture, with the dimensions of the new one, shows for a while until they refresh their browser. How can I prevent this from happening?

You can solve this by telling the user she should clear the browser cache.

If that is not an option, you want to actually prevent the user to cache the image.

So you need to make a difference between each revision of the image. Add a integer field to your database you store the revision number of the image. Then each time you output the user’s image, fetch the actual revision number from the database as well. Add it as the query-info-part of the image URL:

<img src="avatars/user/929292/photo.jpg?revision">
                                        ^^^^^^^^

The browser will still cache profile pictures but you make him aware of the revision, so a specific revision is cached.

Old avatar picture:

<img src="avatars/user/929292/photo.jpg?1">

Then the user uploads a new image, you increment the revision field, the new avatar image is:

<img src="avatars/user/929292/photo.jpg?2">

If the revision changes, the browser notices that and will pick the image from the server.