How to make a form which INCLUDES an upload file input

Question

Hello I'm trying to create a form which includes an upload file input. My form is sending data to my database while the file uploaded is stored in the img folder.

Now the form without the upload input works fine. The upload script without the form works fine too. But I can't manage to make them work together. I tried to include the "upload script" in my main form script but it didn't worked. I actually don't khow how this procedure should be done.

What I would like to do is that when I submit the form the data goes in the database and the upload file in my img folder. I think the problem comes somehow from the submit button.

Sorry for posting all my code but I think it's necessary to understand...

This is my addOutfit.php (which sends the data of my form to my database)

    require("ajax/db.php"); 

    $message = " "; 

    if ( $_POST ) {

    if (!empty($_POST['type'])){ 

    $title = htmlspecialchars($_POST['title']);
    $description = htmlspecialchars($_POST['description']);
    $brand = htmlspecialchars($_POST['brand']);
    $material = htmlspecialchars($_POST['material']);
    $type = htmlspecialchars($_POST['type']);
    $color = htmlspecialchars($_POST['color']);

    $sql = "INSERT INTO outfit (title, description, brand, material,  type, color) VALUES('$title', '$description', '$brand', '$material', '$type', '$color')";
    $statement = $pdo->prepare($sql);

    $statement->execute(['title' => $title, 'description' => $description, 'brand' => $brand, 'material' => $material, 'type' => $type, 'color' => $color]);

  $message = "The item has been added"; 
   } else {

   $message = "The type field is compulsory"; 
   }
 }
 ?>


 <!--AddOutfit form-->
 <div class="container-fluid" id="addOutfitForm" >

 <div class="col-xs-12 col-md-10">
 <form action ="addOutfit.php" method="post" novalidate> 

  <?php if ( $message ) { ?>
  <h3 style="color: red;"><?=$message?></h3>
  <?php } ?>

   <div class="form-group">
    <label for="title">Title</label>
    <input type="text" class="form-control" name="title">
    </div>

    <div class="form-group">
    <label for="description">Description</label>
    <textarea class="form-control" rows="3" name="description"></textarea>
    </div>

    <div class="form-group">
    <label for="type">Type</label>
    <input type="text" class="form-control" name="type">
    </div>

    <div class="form-group">
    <label for="brand">Brand</label>
    <input type="text" class="form-control" name="brand">
    </div>


    <div class="form-group">
    <label for="color">Color</label>
    <input type="text" class="form-control" name="color">
    </div>

    <div class="form-group">
    <label for="material">Material</label>
    <input type="text" class="form-control" name="material">
    </div>

   <div class="form-group" action="upload.php" method="post" enctype="multipart/form-data">
    <label for="fileToUpload">Picture</label>
    <input type="file" name="fileToUpload" id="fileToUpload">
   </div>

     <button type="submit" class="btn btn-default" name="submit" value="Upload Image">Send</button>     

  </form>
</div>

This is my upload.php (my uploading documents script)

   <?php
    $target_dir = "img/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
    $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

    if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);

    if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
    } else {
    echo "File is not an image.";
    $uploadOk = 0;
    }
   }

   if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
   }

   if ($_FILES["fileToUpload"]["size"] > 500000) {
   echo "Sorry, your file is too large.";
   $uploadOk = 0;
   }

   if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}

if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";

 } else {
 if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
      echo "Sorry, there was an error uploading your file.";
     }
    }

Answer 1

Your approach is confusing a bit. You need to check if you have POST request to store the data inside db and check also if you have a file to upload it

if(isset($_POST)) {
 // validate and insert the data into db

 // if isset $_FILES["fileToUpload"] update the file
 if(isset($_FILES) && isset($_FILES["fileToUpload"]['name'])) {

 }
}

Also don't forget to add the enctype="multipart/form-data" attribute to the form

<form action ="addOutfit.php" enctype="multipart/form-data" method="post" novalidate>

Answer 2

I think that you just need to add the enctype="multipart/form-data" attribute to your <form> tag.

See http://www.w3schools.com/tags/att_form_enctype.asp

Submitting files only works when the form data is submitted as multipart.

Answer 3

Instead of

<div class="form-group" action="upload.php" method="post" enctype="multipart/form-data"> <label for="fileToUpload">Picture</label>

Have you tried:

<form action ="addOutfit.php" method="post" enctype="multipart/form-data" novalidate>