Undefined index error while trying to upload images

Question

I'm making a basic CMS with PHP for managing my online store. So I created a page where users can insert new products with custom images and information. Here is the insert_product.php page:

<div class="box-body">
                <form action="" method="POST">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="form-group">
                                    <label>Product Title:</label>
                                    <input type="text" name="product_title" class="form-control my-colorpicker1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Product Category:</label>
                                <select class="form-control select2" name="product_cat" style="width: 100%;">
                                    <?php 
                                    echo get_cats();
                                    ?>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Product Brand:</label>
                                <select class="form-control select2" name="product_brand" style="width: 100%;">
                                    <?php 
                                    echo get_brands();
                                    ?>
                                </select>
                            </div>
                            <div class="form-group">
                                <div class="form-group">
                                    <label>Product Image 1:</label>
                                    <input type="file" name="product_img1" class="form-control my-colorpicker1">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-group">
                                    <label>Product Image 2:</label>
                                    <input type="file" name="product_img2" class="form-control my-colorpicker1">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-group">
                                    <label>Product Image 3:</label>
                                    <input type="file" name="product_img3" class="form-control my-colorpicker1">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="form-group">
                                    <label>Product Price:</label>
                                    <input type="text" name="product_price" class="form-control my-colorpicker1">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-group">
                                    <label>Product Keywords:</label>
                                    <input type="text" name="product_keywords" class="form-control my-colorpicker1">
                                </div>
                            </div>
                            <input type="submit" name="insert_product" class="btn" value="Submit">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box box-info">
                                <div class="box-header">
                                    <h3 class="box-title">Product Description:
                                        <small>Add new product to your onlinestore</small>
                                    </h3>
                                    <div class="pull-right box-tools">
                                        <button type="button" class="btn btn-info btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                                        <i class="fa fa-minus"></i></button>
                                        <button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove">
                                        <i class="fa fa-times"></i></button>
                                    </div>
                                </div>
                                <div class="box-body pad">
                                        <textarea name="product_desc" placeholder="Add description to your product" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

And the action file of this goes like this:

<?php 
if(isset($_POST['insert_product'])){
    // text data variables
    $product_title = $_POST['product_title'];
    $product_cat = $_POST['product_cat'];
    $product_brand = $_POST['product_brand'];
    $product_price = $_POST['product_price'];
    $product_desc = $_POST['product_desc'];
    $status = 'on';
    $product_keywords = $_POST['product_keywords'];

    // image names
    $product_img1 = $_FILES['product_img1']['name'];
    $product_img2 = $_FILES['product_img2']['name'];
    $product_img3 = $_FILES['product_img3']['name'];

    // image temp names
    $temp_name1 = $_FILES['product_img1']['tmp_name'];
    $temp_name2 = $_FILES['product_img2']['tmp_name'];
    $temp_name3 = $_FILES['product_img3']['tmp_name'];

    if($product_title == '' OR $product_cat == '' OR $product_brand == '' OR $product_price == '' OR $product_desc == '' OR $product_keywords == '' OR $product_img1 == ''){
        echo "
            <script>alert('Please fill all the fields!')</script>
            exit();
        ";
    }else{

        // uploading images to its folder
        move_uploaded_file($temp_name1,"product_images/$product_img1");
        move_uploaded_file($temp_name2,"product_images/$product_img2");
        move_uploaded_file($temp_name3,"product_images/$product_img3");

        $insert_product = "
        INSERT INTO products (cat_id,brand_id,date,product_title,product_img1,product_img2,product_img3,product_price,product_desc,status) 
        VALUES ('$product_cat','$product_brand',NOW(),'$product_title','$product_img1','$product_img2','$product_img3','$product_price','$product_desc','$status')
        ";

        $run_product = mysqli_query($con,$insert_product);

        if($run_product){
            echo "
                <script>alert('Product inserted successfully')</script>
                exit();
            ";
        }
    }
}
?>

So as you can see everything looks fine but whenever I try to fill in the form, I get these error messages:

**

Notice: Undefined index: product_img1 in insert_products.php on line 13

Notice: Undefined index: product_img2 in insert_products.php on line 14

Notice: Undefined index: product_img3 in insert_products.php on line 15

Notice: Undefined index: product_img1 in insert_products.php on line 18

Notice: Undefined index: product_img2 in insert_products.php on line 19

Notice: Undefined index: product_img3 in insert_products.php on line 20

**

Which is related to these lines:

        // image names
    $product_img1 = $_FILES['product_img1']['name'];
    $product_img2 = $_FILES['product_img2']['name'];
    $product_img3 = $_FILES['product_img3']['name'];

    // image temp names
    $temp_name1 = $_FILES['product_img1']['tmp_name'];
    $temp_name2 = $_FILES['product_img2']['tmp_name'];
    $temp_name3 = $_FILES['product_img3']['tmp_name'];

I know this is a typical question, but I really confused that what is wrong with this. So if you know, please let me .. Thanks!

Answer 1

Change the following:

<form action="" method="POST">

to

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

and try again.

To upload image using form you have to send form-data encoded as "multipart/form-data"

Answer 2

When uploading files always include the form attributeenctype="multipart/form-data".

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