html - trying to upload two images into my database using php but it is not working

I am new to PHP so please help me out the errors that I keep getting are

Notice: Undefined index: image1 in C:\wamp\www\Tech Cube\add-product.php on line 12

Warning: file_get_contents(): Filename cannot be empty in C:\wamp\www\Tech Cube\add-product.php on line 12

Notice: Undefined index: image2 in C:\wamp\www\Tech Cube\add-product.php on line 13

Warning: file_get_contents(): Filename cannot be empty in C:\wamp\www\Tech Cube\add-product.php on line 13

and my code is

<?php
    $connection = mysqli_connect("localhost","root","");
    $db = mysqli_select_db($connection,'techcubedb');

    if(isset($_POST['add']))
    {
        if(!empty($_POST['name']) && !empty($_POST['price']) &&!empty($_POST['image1']) &&!empty($_POST['image2'])){

            $name = $_POST['name'];
            $price = $_POST['price'];
            $description = $_POST['description'];
            $image1 = addslashes(file_get_contents($_FILES["image1"]["tmp_name"]));
            $image2 = addslashes(file_get_contents($_FILES["image2"]["tmp_name"]));

            $query = "INSERT INTO 'products'('name','price','description','image1','image2')VALUES ('$name','$price','$description','$image1','$image2')";
            $query_run=mysqli_query($connection,$query);

            if($query_run)
            {
                echo '<script type="text/javascript"> alert("Product Added")</script>';
            }
            else{
                echo '<script type="text/javascript"> alert("Product not Added")</script>';
            }

        }
        else{
            echo '<script type="text/javascript"> alert("All fields are required")</script>';
        }
    }
    
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>add product</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<Center>
    <div class="container">
      <div class="col-md-6 mx-auto text-center">

         <div class="header-title">
             <br><br>
            <h1 class="wv-heading--title">
               Add Product
            </h1>
         </div>
         <br>
      </div>
            <div class="row">
                <div class="col-md-4 mx-auto">
                    <div class="myform form ">
                        <form action=" " method="post" encrtype="multipart/form-data">
                            <div class="form-group ">
                                <label>Product name</label>
                                <input type="text" name="name" class="form-control" >
                                <span class="help-block"></span>
                            </div>    
                            <div class="form-group ">
                                <label>Price</label>
                                <input type="text" name="price" class="form-control" >
                                <span class="help-block"></span>
                            </div> 
                            <div class="form-group ">
                                <label>Description</label>
                                <textarea type="text" name="description" class="form-control" ></textarea>
                                <span class="help-block"></span>
                            </div> 
                            <div class="form-group ">
                                <label>Images</label><br>
                                <input type="file" name="image1" id="image1">
                                <span class="help-block"></span>
                            </div> 
                            <div class="form-group ">
                                <input type="file" name="image2" id="image2">
                                <span class="help-block"></span>
                            </div>
                            <br>
                            <br>
                            <div class="form-group">
                                <input type="submit" name="add" class="btn btn-primary" value="Add Product">
                            </div>
                            
                        </form>
                    </div>   
                </div>
            </div>
        </div>
    </Center>

</body>
</html>

Answer

Solution:

May be you will need two edits...

enctype="multipart/form-data"

instead of

encrtype="multipart/form-data"

And

     !empty($_FILES['image1']['name'] ) && !empty($_FILES['image2']['name'])

And one more thing is...

you will need to check and verify uploaded file's type, size etc for security reason....

Source