Search code examples
phpmysqlmultifile-uploader

uploading multiple image files to php mysql gallery


I got this galley working about 65% of where I want it to be. I was wondering if someone could look at the following code and tell me how to upload multiple images to my gallery.

Here is the code.

Simple admin form code:

    <form enctype="multipart/form-data" action="uploader.php" method="POST">


        Category: <select class="text" name="dataType[]">
        <option value="treeremoval" selected="selected">treeremoval</option>
        <option value="treetrimming" >treetrimming</option>
        <option value="treebracing" >treebracing</option>
        <option value="stumpgrinding" >stumpgrinding</option>
        <option value="firewood" >firewood</option>
        <option value="cleanup" >cleanup</option>
        </select>
<br /><br />

    Caption: <input type="text" name="title[]">
<br /><br />

Image to upload: <input type="file" name="image[]" />
<br /><br />






        Category: <select class="text" name="dataType[]">
        <option value="treeremoval" selected="selected">treeremoval</option>
        <option value="treetrimming" >treetrimming</option>
        <option value="treebracing" >treebracing</option>
        <option value="stumpgrinding" >stumpgrinding</option>
        <option value="firewood" >firewood</option>
        <option value="cleanup" >cleanup</option>
        </select>
<br /><br />

    Caption: <input type="text" name="title[]">
<br /><br />

Image to upload: <input type="file" name="image[]" />
<br /><br />



    <input type="submit" value="Upload">
</form>

uploader.php code:


    <?php
include($_SERVER['DOCUMENT_ROOT'] . "/connections/dbconnect.php");

$dataType = mysql_real_escape_string($_POST["dataType"][$i]);
$title = mysql_real_escape_string($_POST["title"][$i]);

$fileData = pathinfo(basename($_FILES["image"]["name"][$i]));

$fileName = uniqid() . '.' . $fileData['extension'][$i];

$target_path = ($_SERVER['DOCUMENT_ROOT'] . "/images/gallery/" . $fileName);


for($i=0;$i<count($_FILES["image"]["name"]);$i++){

 $dataType = mysql_real_escape_string($_POST["dataType"][$i]);  // get the dataType with the same key - $i
    $title = mysql_real_escape_string($_POST["title"][$i]);   // get the title with the same key - $i

    $fileData = pathinfo(basename($_FILES["image"]["name"][$i]));
while(file_exists($target_path))
{
    $fileName = uniqid() . '.' . $fileData['extension'];
    $target_path = ($_SERVER['DOCUMENT_ROOT'] . "/images/gallery/" . $fileName);
}

 if (move_uploaded_file($_FILES["image"]["tmp_name"][$i], $target_path))
    {    // The file is in the images/gallery folder. Insert record into database by
    // executing the following query:
     $sql="INSERT INTO images (data_type, title, file_name)"."VALUES('$dataType','$title','$fileName')";
     $retval = mysql_query($sql);



echo "The image {$_FILES['image']['name'][$i]} was successfully uploaded and added to the gallery<br />
     <a href='index.php'>Add another image</a><br />";


}
else
{
 echo "There was an error uploading the file {$_FILES['image']['name'][$i]}, please try again!<br />";
    }
} // close your foreach
?>

I tried duplicating the form code 4 times, but it would only upload 1 image to the gallery.

Any help would be greatly appreciated.

Thank You!


Solution

  • In your form, add multiple file inputs. One way is to use an array name - image[]

    Image to upload: <input type="file" name="image[]" /><br />
    Image to upload: <input type="file" name="image[]" /><br />
    Image to upload: <input type="file" name="image[]" /><br />
    ....  // as many as you want. Just be aware of upload_max_filesize, memory_limit, post_max_size etc.
    <br /> 
    

    Then in your uploader.php, wrap your file upload code with a for loop

    for($i=0;$i<count($_FILES["image"]["name"]);$i++){
    
        $fileData = pathinfo(basename($_FILES["image"]["name"][$i]));
    
         ...
    
        if (move_uploaded_file($_FILES["image"]["tmp_name"][$i], $target_path))
        {
          ...
    
          echo "The image {$_FILES['image']['name'][$i]} was successfully uploaded and added to the gallery<br />";
    
        }
        else
        {
         echo "There was an error uploading the file {$_FILES['image']['name'][$i]}, please try again!<br />";
        }
    } // close your foreach
    

    the manual has a great section on common pitfalls when uploading files, especially multiple. http://www.php.net/manual/en/features.file-upload.common-pitfalls.php


    If you want to do multiple of the others, it can be done the same way (I abbreviated the selects to reduce copy/paste) -

    <form enctype="multipart/form-data" action="uploader.php" method="POST">
    
        // 1st set
        Category: <select class="text" name="dataType[]" />
        ...
        </select><br />
        <br />        
    
        Caption: <input type="text" name="title[]" /><br />
        <br />
    
        Image to upload: <input type="file" name="image[]" /><br />
        <br /> 
    
        // 2nd set
        Category: <select class="text" name="dataType[]" />
        ...
        </select><br />
        <br />        
    
        Caption: <input type="text" name="title[]" /><br />
        <br />
    
        Image to upload: <input type="file" name="image[]" /><br />
        <br />  
    
       // and so on, as many as you want  
       ...
        <input type="submit" value="Upload">
    </form>
    

    and your php, put the for loop around all the elements

    for($i=0;$i<count($_FILES["image"]["name"]);$i++){
    
        $dataType = mysql_real_escape_string($_POST["dataType"][$i]);  // get the dataType with the same key - $i
        $title = mysql_real_escape_string($_POST["title"][$i]);   // get the title with the same key - $i
    
        $fileData = pathinfo(basename($_FILES["image"]["name"][$i]));
    
         ...
    
        if (move_uploaded_file($_FILES["image"]["tmp_name"][$i], $target_path))
        {
          ...
    
          echo "The image {$_FILES['image']['name'][$i]} was successfully uploaded and added to the gallery<br />";
    
        }
        else
        {
         echo "There was an error uploading the file {$_FILES['image']['name'][$i]}, please try again!<br />";
        }
    } // close your foreach
    

    edit
    you are almost there. Remove the duplicate code above the for loop. Remove basename(), as this is causing your extension to fail, and pathinfo() will return the ['basename'].

    <?php
    include($_SERVER['DOCUMENT_ROOT'] . "/connections/dbconnect.php");
    
    for($i=0;$i<count($_FILES["image"]["name"]);$i++){
      if($_FILES["image"]["name"][$i] != ''){ // don't insert if file name empty
        $dataType = mysql_real_escape_string($_POST["dataType"][$i]);
        $title = mysql_real_escape_string($_POST["title"][$i]);
    
        $fileData = pathinfo($_FILES["image"]["name"][$i]);
    
        $fileName = uniqid() . '.' . $fileData['extension'];
        $target_path = $_SERVER['DOCUMENT_ROOT'] . "/images/gallery/" . $fileName;
    
        while(file_exists($target_path)){
           $fileName = uniqid() . '.' . $fileData['extension'];
           $target_path = $_SERVER['DOCUMENT_ROOT'] . "/images/gallery/" . $fileName;
        }     
    
      if (move_uploaded_file($_FILES["image"]["tmp_name"][$i], $target_path)){    // The file is in the images/gallery folder. 
        // Insert record into database by executing the following query:
         $sql="INSERT INTO images (data_type, title, file_name) "."VALUES('$dataType','$title','$fileName')";
         $retval = mysql_query($sql);
    
        echo "The image {$_FILES['image']['name'][$i]} was successfully uploaded and added to the gallery<br />
         <a href='index.php'>Add another image</a><br />";
      }
      else
      {
       echo "There was an error uploading the file {$_FILES['image']['name'][$i]}, please try again!<br />";
        }
      }
    } // close your foreach
    ?>