Multiple image upload?

[GlenRogers]

Hi, I need to have a form with multiple image and description fields, say 15. So if 15 are filled in then it adds then it adds the images to 2 dirs(thumb and images) and saves the image pathname and the descriptions to the 2 mysql tables.

I have this working ok if I dont have multiple fields i my form, but I'd really like to have multiple fields!

This is the code I have so far.

Form

<form class="form1" action="pete_submit.php" method="post" enctype="multipart/form-data" name="image_upload_form" id="image_upload_form" style="margin-bottom:0px;">
<input  type="file" id="image_upload_box" size="30" name="image_upload_box" />
<span class="text2">Description</span> <input type=text name="adescription"><br />
<br />
<input type="submit" name="submit" value="Upload Images" />       
<input name="submitted_form" type="hidden" id="submitted_form" value="image_upload_form" />
</form>

pete_submit.php (this also resizes the images twice for thumbs and resized full images)

<?php 
ini_set("memory_limit", "400000000"); // for large images so that we do not get "Allowed memory exhausted"
include '../inc/connect.php';

// upload the file
if ((isset($_POST["submitted_form"])) && ($_POST["submitted_form"] == "image_upload_form")){
   // file needs to be jpg,gif,bmp,x-png and 4 MB max
   if (($_FILES["image_upload_box"]["type"] == "image/jpeg" || $_FILES["image_upload_box"]["type"] == "image/pjpeg" || $_FILES["image_upload_box"]["type"] == "image/gif" || $_FILES["image_upload_box"]["type"] == "image/x-png") && ($_FILES["image_upload_box"]["size"] < 8000000)){
      // some settings
      $max_upload_width = 500;
      $max_upload_height = 500;
      $thumb_height = 150;
      $thumb_width = 150;
      $message = 'Use the browsers back button to try again, or try loading a different image.';
      // if uploaded image was JPG/JPEG
      if($_FILES["image_upload_box"]["type"] == "image/jpeg" || $_FILES["image_upload_box"]["type"] == "image/pjpeg"){
         $image_source = imagecreatefromjpeg($_FILES["image_upload_box"]["tmp_name"]);
      }
      // if uploaded image was GIF
      if($_FILES["image_upload_box"]["type"] == "image/gif"){
         $image_source = imagecreatefromgif($_FILES["image_upload_box"]["tmp_name"]);
      }
      // if uploaded image was PNG
      if($_FILES["image_upload_box"]["type"] == "image/x-png"){
         $image_source = imagecreatefrompng($_FILES["image_upload_box"]["tmp_name"]);
      }
      $remote_file = "../images/galleryimages/".$_FILES["image_upload_box"]["name"];
      $thumb_file = "../images/gallerythumbs/".$_FILES["image_upload_box"]["name"];
      imagejpeg($image_source,$remote_file,100);
      chmod($remote_file,0644);

       //Save image as thumb 
      // get width and height of original image
      list($image_width, $image_height) = getimagesize($remote_file);
      if($image_width>$thumb_width || $image_height>$thumb_height){
         $proportions = $image_height/$image_width;
         $new_width = $thumb_width;
         $new_height = ($thumb_width*$proportions);
         $thumb_image = imagecreatetruecolor($new_width , $new_height);
         $image_source = imagecreatefromjpeg($remote_file);
         imagecopyresampled($thumb_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
         imagejpeg($thumb_image,$thumb_file,100);
         imagedestroy($thumb_image);

         //add the files pathname to the database table thumbs_gallery
         $adescription = $_POST['adescription'];
         $query = "INSERT INTO gallerythumbs VALUE('', '$adescription', '$thumb_file', '1')";
         $result = mysql_query($query);
         if(!$result){
            $error = 'An error occured: '. mysql_error().'<br />';
            $error.= 'Query was: '.$query.'<br />';
            die($message);
         }
         $query = "SELECT `id` FROM `gallerythumbs` WHERE `filename` LIKE '$thumb_file'";
         $result = mysql_query($query);
         if(!$result) {
            $error = 'An error occured: '. mysql_error().'<br />';
            $error.= 'Query was: '.$query;
            die($message);
         }
         $q2 = mysql_fetch_assoc($result);
         mysql_free_result($result);
         $id = $q2['id'];
     }
     // get width and height of original image
     //if landscape make width 500, if portrait make height 500
     list($image_width, $image_height) = getimagesize($remote_file);
     if($image_width>$max_upload_width || $image_height >$max_upload_height){
         $proportions = $image_width/$image_height;
         if($image_width>$image_height){
            $new_width = $max_upload_width;
            $new_height = round($max_upload_width/$proportions);
         }
         else{
            $new_height = $max_upload_height;
            $new_width = round($max_upload_height*$proportions);
         }
      }
      $new_image = imagecreatetruecolor($new_width , $new_height);
      $image_source = imagecreatefromjpeg($remote_file);
      imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
      imagejpeg($new_image,$remote_file,100);

      //add the files pathname to the database table image_gallery.
      $adescription = $_POST['adescription'];
      $query = "INSERT INTO galleryimages VALUE($id, '$adescription', '$remote_file', '1')";
      $result = mysql_query($query);
      if(!$result){
         $error = 'An error occured: '. mysql_error().'<br />';
         $error.= 'Query was: '.$query;
         die($message);
      }
      imagedestroy($image_source);
      header("Location: peteadd.php");
      exit;
   }
   else{
      header("Location: peteadd.php");
      exit;
  }
}
?>

Can anyone help me out on this?

Thanks

[diafol]

There are off-the-peg multiple uploaders (some of them ajax-driven), but you're after your own solution, I take it.

If you want multiple upload, you need to know how the $_FILES superglobal is structured, depending on how you use the name attribute. This can be an issue. :)

This:

<input type="file" name="file[file1]" />
<input type="file" name="file[file2]" />

Is similar to:

<input type="file" name="file[]" />
<input type="file" name="file[]" />

But these will be different to:

<input type="file" name="file1" />
<input type="file" name="file2" />

The $FILES array output will appear as (in order of above) - cut to the first few fields:

[file] => Array
    (
        [name] => Array
            (
                [file1] => image1.png
                [file2] => picture5647.gif
            )

        [type] => Array
            (
                [file1] => image/png
                [file2] => image/gif
            )
    )

AND

[file] => Array
    (
        [name] => Array
            (
                [0] => image1.png
                [1] => picture5647.gif
            )

        [type] => Array
            (
                [0] => image/png
                [1] => image/gif
            )
    )

AND

[file1] => Array
    (
        [name] => image1.png
        [type] => image/png
    )

[file2] => Array
    (
        [name] => picture5647.gif
        [type] => image/gif
    )

So depending on the way you're going to name the file fields...

Personally, I'd go the "file[]" route as I often use a jQuery 'add file field'. For example, display 5 file fields, but then if you need more a [+] button will add more - either another 5 or just one at a time. ANyway, I'm rambling...

[GlenRogers]

Hi Al.

You helped me add multiple 'link' records the other night on this thread Click Here
But I'm totrally lost as to how to implement that into my resize/upload code for this. I absolutley need it to resize the image twice (thumbs and full size). I wouldn't rule out an 'of the peg' solution to this. Can you recommend anything? Or offer advice on my code here?

Cheers

[diafol]

Ok, I see the connection to the last article. I'm not sure if you're going to appreciate this, but the amount of procedural code here is going to be difficult to maintain and possibly debug, so IMO, this is a good case for creating functions to deal with each separate 'procedure' or better still, create a class (OOP) with methods for providing an easy way to code, hiding away the complexity of the functions (methods). My 2p.