1

I have a project For school. I need to make a flower shop and a way to upload new products (flowers). So I made a page where I add a new product and it works except for the image. I just don't know how to send the photo to the database. I work with a domain from school and all the examples on the internet show how to do this to localhost. I don't know how to explain it further.

A product/flower has a name, category, price, description.

This is what my 'add product' page looks like (it does not include the add photo):

<html lang="en">
<?php include '../head.php' ?>

<?php
include '../databasecon.php';
?>

<body>

    <!--================Top Header Area =================-->
    <header class="shop_header_area carousel_menu_area">
        <!--================Categories Product Area =================-->
        <section class="categories_product_main p_80">
            <div class="container" style="max-width: unset;">
                <div class="col-lg-12" style="padding: 0; text-align:center;">
                    <h1 style="margin:0; padding-bottom: 40px; color: #09366C; font-weight: bold; text-align:left;"> Bloem toevoegen </h1>
                </div>
                <div class="categories_main_inner">
                    <div class="row row_disable">
                        <div class="col-lg-12">
                        </div>
                        <?php include 'menubeheer.php' ?>

                        <div class="float-left col-lg-9">
                            <?php

                            $conn = Opencon();
                            $QUERY = "SELECT * FROM producten";

                            if (!empty($_POST)) {
                                $naam = htmlspecialchars($_POST['product_naam']);
                                $categorie = htmlspecialchars($_POST['product_categorie']);
                                $prijs = htmlspecialchars($_POST['product_prijs']);
                                $omschrijving = htmlspecialchars($_POST['product_omschrijving']);

                                $insert = "INSERT INTO producten (product_naam,product_categorie,product_prijs,product_omschrijving)
                            VALUES('$naam','$categorie','$prijs','$omschrijving')";
                            }
                            ?>

                            <form action="bloemtoevoegen.php" method="POST">
                                <div class="col-lg-2" style="float: left; margin-top: 10px;"> Product naam </div>
                                <div class="col-lg-10" style="float: left; margin-top: 10px;">
                                    <input type="text" name="product_naam" style="width: 35%;" required><br>
                                </div>

                                <div class="col-lg-2" style="float:left; margin-top: 10px;"> Categorie </div>
                                <div class="col-lg-10" style="float: left; margin-top: 10px;">
                                    <select name="product_categorie">
                                        <option value="bloem">Losse bloem</option>
                                        <option value="boeket">Boeket</option>
                                    </select>
                                </div>

                                <div class="col-lg-2" style="float: left; margin-top: 10px;"> Prijs </div>
                                <div class="col-lg-10" style="float: left; margin-top: 10px;">
                                    <input type="text" name="product_prijs" style="width: 35%;" required><br>
                                </div>


                                <div class="col-lg-2" style="float: left; margin-top: 10px;"> Omschrijving </div>
                                <div class="col-lg-10" style="float: left; margin-top: 10px;">
                                    <input type="text" name="product_omschrijving" style="width: 50%; height:100%;" required><br>
                                </div>


                                <div class="col-lg-2" style="float: left; margin-top: 10px;"> Foto </div>

                                <div class="col-lg-10" style="float: left; margin-top: 10px;">
                                    <input type="file" name="product_foto">
                                </div>
                                <div class="col-lg-12">
                                    <b>Liefst een foto met afmetingen van 300 bij 200!</b>
                                </div>

                                <!-- <div class="col-lg-10" style="float: left; margin-top: 10px;">
                                    <input type="text" name="product_fotos" style="width: 35%;" required><br>
                                </div> -->

                                <br>
                                <input type="submit" class="add_cart_btn" style="cursor: pointer; margin-top:30px;" value="Opslaan" name="submit">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <?php include '../script.php' ?>
</body>

</html>
James Z
  • 12,209
  • 10
  • 24
  • 44
miraswag
  • 13
  • 3
  • Welcome to SO. Don't take it bad but on the site "ASAP" is considered as a bit rude, even more because this is more a code writing request than a focused question. For what you are asking, it shouldn't make any difference for what you call "server not localhost", because even for localhost, you need to have a local server running for PHP to work. So the solutions you found for localhost are the same with a live server, only the URL and possible server configurations would change. Good luck – Kaddath Jan 30 '20 at 08:49

1 Answers1

0

The first step is to set the enctype property on your form tag to multipart/form-data. You can read more about what that does here: 

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

When the form is submitted, we save the file to a directory and store the path in our database:

if (!empty($_POST) && !empty($_FILES["product_foto"]["name"])) {
  $naam = htmlspecialchars($_POST['product_naam']);
  $categorie = htmlspecialchars($_POST['product_categorie']);
  $prijs = htmlspecialchars($_POST['product_prijs']);
  $omschrijving = htmlspecialchars($_POST['product_omschrijving']);

  $target_directory = getcwd() . "/uploads/";                  // The location to store the files
  $file_name = basename($_FILES["product_foto"]["name"]);      // The uploaded file name
  $target_path = $target_directory . $file_name;               // The path to our file

  if ( move_uploaded_file($_FILES["product_foto"]["tmp_name"], $target_path) ) {
      // We have added "product_foto" to the INSERT INTO and added $file_name to the VALUES
      $insert = "INSERT INTO producten (product_naam,product_categorie,product_prijs,product_omschrijving,product_foto)
      VALUES('$naam','$categorie','$prijs','$omschrijving','$file_name')";
  } else {
      die("Unable to save file to disk");
  }
}

Things to note:

  1. You will need to create a directory called uploads. It will be located in the same directory your add product file is located.

  2. I've assumed you have a field on your database table called product_foto in the INSERT INTO statement. You may need to change that to match your actual field name

You should now have the image file stored in your database, and the file should exist in your directory.

If you would prefer to store the path, change to this line:

$insert = "INSERT INTO producten (product_naam,product_categorie,product_prijs,product_omschrijving,product_foto)
      VALUES('$naam','$categorie','$prijs','$omschrijving','$target_path')";
Brett Gregson
  • 5,867
  • 3
  • 42
  • 60
  • I get an error saying 'Notice: Undefined variable: targetFilePath' and that the file type is Invalid but I tried uploading a png and it should work? – miraswag Jan 30 '20 at 09:22
  • what do i exactly need to delete to remove the check for the file type? – miraswag Jan 30 '20 at 09:25
  • Updated without the filetype check @miraswag – Brett Gregson Jan 30 '20 at 09:30
  • I'm sorry to bother you again but it still is not working. when I fill in the form the image option is not required but it still does not work when i don't upload an image. I am not seeing any errors so I really don't understand why its not working – miraswag Jan 30 '20 at 10:38
  • @miraswag let me take a look. I might invite you to the chat section of the site so we can debug it together – Brett Gregson Jan 30 '20 at 10:56
  • @miraswag Try the code now, I tested and it works for me! I've created a chat here: https://chat.stackoverflow.com/rooms/206912/59981730 – Brett Gregson Jan 30 '20 at 11:07
  • Okay I would like to – miraswag Jan 30 '20 at 11:08
  • 1
    I'm sorry for the late answer, I cannot chat since i don't have 20 reputation points. I am so close yet it still does not work. My images directory needs to be ../images/bloemen, but i can't get out of the directory if you know what I mean. Is there a way to still get '../'? Because then the images are going to the right place. Now the name of the image that i'm uploading is showing in the database and not the path – miraswag Jan 30 '20 at 12:14
  • @miraswag Is your images directory one back from where your add product page is? In this line `getcwd() . "/uploads/"; ` the `getcwd()` part points to the current directory (where the currently running file is located), so if your images directory is one back you would change it to `getcwd() . "/../images/bloemen/";` if it's on the same directory level you can try `getcwd() . "/images/bloemen/";` – Brett Gregson Jan 30 '20 at 12:19
  • Oh, and I've updated the answer for if you want to store the path to the image (sorry my original post only stored the file name) – Brett Gregson Jan 30 '20 at 12:22
  • 1
    Thanks a lot it works now I love you so much <33333 :) – miraswag Jan 30 '20 at 13:05
  • @miraswag it's a pleasure, happy you got it working! Let me know if you get stuck on anything else. All the best – Brett Gregson Jan 30 '20 at 13:27
  • Actually I have. Now I can Add a flower to my database but I also need to Edit it. I know how to do that with the other data like the name and price but with the image it is another story. don't feel obligated helping me, i am still trying but if you can write te code like you did above without hesitating it would save me a lot of time :) – miraswag Jan 30 '20 at 14:06
  • @miraswag so you need an edit form? This should work: https://3v4l.org/Cd502 – Brett Gregson Jan 30 '20 at 14:42
  • @miraswag no problem! Hope you get good marks for the project :D – Brett Gregson Jan 30 '20 at 22:28
  • 1
    I will let you know :) – miraswag Jan 31 '20 at 00:37
  • 1
    The mark I just got for the project is 8, thanks again you have helped me a lot! – miraswag Jan 31 '20 at 12:03