Resized images not saving upon file upload

Question

I'm trying to create a system which allows users to upload an image, this image is then saved to an /images folder along with a resized thumbnail version.

As an example, a user would visit the upload page, select their file and hit the upload button. The image is then saved and a function is then called to resize the image and save the resized image as th-filename.ext along with filename.ext.

At the moment, I've managed to get the file uploads to work although I can't get the resizing and saving to work. I can't seem to locate the issue as resizing and saving images using PHP is newish to me although I imagine it's nothing to do with the SimpleImage.php. Any help would be greatly appreciated as I'm not getting anywhere :S.

My upload page form:

<form action="assets/includes/upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="file"><br><input type="submit" name="submit" value="Submit" class="btn btn-primary"></form>

My uploadImage function (reduced down):

function imageUpload() {
$allowedExts = array("jpg", "jpeg", "gif", "png");
$extension = end(explode(".", $_FILES["file"]["name"]));
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/png")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& in_array($extension, $allowedExts))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br>";
    echo "Type: " . $_FILES["file"]["type"] . "<br>";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

    if (file_exists("../../images/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      $file = $_FILES["file"]["name"];
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "../../images/" . $_FILES["file"]["name"]);
          include('SimpleImage.php');
          $image = new SimpleImage();
          $image->load($file);
          $image->resizeToWidth(150);
          $image->save("th-" . $file);
      }
    }
  }
else
  {
  echo "Invalid file";
  }

  header("Location: ../../album.php"); 
  die(""); 
}

As well as the SimpleImage.php:

    <?
class SimpleImage {

   var $image;
   var $image_type;

   function load($filename) {

      $image_info = getimagesize($filename);
      $this->image_type = $image_info[2];
      if( $this->image_type == IMAGETYPE_JPEG ) {

         $this->image = imagecreatefromjpeg($filename);
      } elseif( $this->image_type == IMAGETYPE_GIF ) {

         $this->image = imagecreatefromgif($filename);
      } elseif( $this->image_type == IMAGETYPE_PNG ) {

         $this->image = imagecreatefrompng($filename);
      }
   }
   function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=null) {

      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image,$filename,$compression);
      } elseif( $image_type == IMAGETYPE_GIF ) {

         imagegif($this->image,$filename);
      } elseif( $image_type == IMAGETYPE_PNG ) {

         imagepng($this->image,$filename);
      }
      if( $permissions != null) {

         chmod($filename,$permissions);
      }
   }
   function output($image_type=IMAGETYPE_JPEG) {

      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image);
      } elseif( $image_type == IMAGETYPE_GIF ) {

         imagegif($this->image);
      } elseif( $image_type == IMAGETYPE_PNG ) {

         imagepng($this->image);
      }
   }
   function getWidth() {

      return imagesx($this->image);
   }
   function getHeight() {

      return imagesy($this->image);
   }
   function resizeToHeight($height) {

      $ratio = $height / $this->getHeight();
      $width = $this->getWidth() * $ratio;
      $this->resize($width,$height);
   }

   function resizeToWidth($width) {
      $ratio = $width / $this->getWidth();
      $height = $this->getheight() * $ratio;
      $this->resize($width,$height);
   }

   function scale($scale) {
      $width = $this->getWidth() * $scale/100;
      $height = $this->getheight() * $scale/100;
      $this->resize($width,$height);
   }

   function resize($width,$height) {
      $new_image = imagecreatetruecolor($width, $height);
      imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());
      $this->image = $new_image;
   }      

}
?>

Answer 1

Trying to upload, resize and save the same image using a single script poses all sorts of problems, especially as the image file is already or still being processed by the application. So you need to at least separate the functions and to make sure that one function has let go of the file in question before letting another part of your script open it again, you need to create a time interval.

Now time intervals are only good if file sizes are minimal and server resources are not consumed. So to the best way to ensure that enough time is allowed is to actually separate the functions and put them on separate pages.

Those pages can load the next one automatically by using scripted redirect links, or you can make it look meaningful by presenting a preview on the page with a button for the user to click submit.