Uploading multiple files with MULTIPLE Inputs

Question

I am building an e-mail template builder that allows me to input content that then populates into an html email template. Part of the form allows you to add new sections. Each section has an upload input that allows users to add a thumbnail image to that section. I'm struggling to figure out how to send multiple images in a single form that come from multiple inputs (rather than just setting a single input to "multiple").

Here's the HTML

<div class="row">
        <div id="example1" class="list-group col">
          <div class="list-group-item article">
            <h4>Article Heading:</h4>
            <input type="text" name="ArticleHeading[]" 
    placeholder="Type your heading" />
            <h4>Article Subheading:</h4>
            <input type="text" name="ArticleHeading[]" 
    placeholder="Type your subheading"/>
            <h4>Thumbnail Image:</h4>
            <input type="file" name="fileToUpload" 
   id="fileToUpload">
          </div>
        </div>
      </div>

Here's the PHP:

//IMAGE UPLOADING
    $target_dir = "uploads/";
    $target_file = $target_dir . 
    basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
    $imageFileType = 
    strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
    // Check if image file is a actual image or fake image
    if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"] 
   ["tmp_name"]);
    if($check !== false) {
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
     }
     }
     // Check if file already exists
     if (file_exists($target_file)) {
     echo "Sorry, file already exists.";
     $uploadOk = 0;
     }
     // // Check file size
     // if ($_FILES["fileToUpload"]["size"] > 500000) {
     //     echo "Sorry, your file is too large.";
     //     $uploadOk = 0;
     // }
     // Allow certain file formats
     if($imageFileType != "jpg" && $imageFileType != "png" 
      && $imageFileType != "jpeg"
     && $imageFileType != "gif" ) {
     echo "Sorry, only JPG, JPEG, PNG & GIF files are 
     allowed.";
     $uploadOk = 0;
     }
     // Check if $uploadOk is set to 0 by an error
     if ($uploadOk == 0) {
     echo "Sorry, your file was not uploaded.";
     // if everything is ok, try to upload file
     } else {
     if (move_uploaded_file($_FILES["fileToUpload"] 
     ["tmp_name"], $target_file)) {
     } else {
         echo "Sorry, there was an error uploading your 
     file.";
     }
     }
     $thumbnailPath = "uploads/".$_FILES["fileToUpload"] 
     ["name"];
     //END IMAGE UPLOADING

I tried naming the file input name="file[]" and then using the array to upload each file, but it errored every time....not sure what else to do.

Answer 1

Add attritube enctype="multipart/form-data" to your form.

See this thread for more information.

Answer 2

I realized I was doing it right by setting the name to an array for the images. I needed to create a for() loop that then ran through the array and assigned each file path to another array. I then assigned each value in that array to an tag.

Here's the HTML:

<input type="file" name="upload[]" multiple="multiple">

Here's the PHP:

//$files = array_filter($_FILES['upload']['name']); //something like that to be used before processing files.
// Count # of uploaded files in array
$total = count($_FILES['upload']['name']);
echo $total."<br>";
$newArray = array();

// Loop through each file
for( $i=0 ; $i < $total ; $i++ ) {

  //Get the temp file path
  $tmpFilePath = $_FILES['upload']['tmp_name'][$i];

  //Make sure we have a file path
  if ($tmpFilePath != ""){
    //Setup our new file path
    $newFilePath = "uploads/" . $_FILES['upload']['name'][$i];

    //Upload the file into the temp dir
    if(move_uploaded_file($tmpFilePath, $newFilePath)) {
      //Handle other code here

    }
  }
}