I want to add Upload Image option in my addProducts.html page

I want to Add Upload Image in my input form , input form is taking product Name, Product Description, Product Model , PRODUCT Price where i want to add one thing more upload image option so that we can choose desired image to add data of product

/ / addProduct.html page code / /

Products

<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/myStyle.css">




<!--header section-->

    
        
            
                <a href="index.html">Sneakers</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    
                

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link activeLink" href="index.html">Home</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Products
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="addProduct.html">Add Product</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contacts.html">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!--add product section-->
        <div class="col-md-8">
            <!--alert to tell products added-->
            <div id="successProductAlert" class="alert alert-warning" role="alert">
                Product added successfully!
            </div>
            <form>
                <div class="form-group">
                    <label for="productName">Product Name</label>
                    <input onkeyup="disableBtn()" id="productName" type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label for="productText">Product Description</label>
                    <textarea onkeyup="disableBtn()" id="productDesc" class="form-control" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="productModel">Product Model</label>
                    <input onkeyup="disableBtn()" id="productModel" type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label for="productPrice">Product Price</label>
                    <input onkeyup="disableBtn()" id="productPrice" type="text" class="form-control">
                </div>
            </form>
            <button id="productBtn" type="submit" class="btn btn-primary">Add Product</button>
        </div>
        <!--end product section-->
    </div>
</section>
<!--END header section-->

<!-- view product section-->
<section class="my-5">
    <div class="container">
        <h2 id="productHeadline">Our Products</h2>
        <div id="searchItem" class="w-50 my-4">
            <input type="text" placeholder="Search" class="form-control" id="mySearchInp">
            <i class="fas fa-lg fa-search mySearch"></i>
        </div>
        <div class="row" id="dataRow">
        </div>
    </div>
</section>
<!--end of view product-->

<!--scripts-->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/myJs.js"></script>

/// I want that when I upload Image and fill the form data and after Click on Add Product Button for Adding Product my description and desired Image so that my description and desired image will show like the image attached but image should be that one which i uploaded . i have tried alot but not solve the problem . if someone understand the logic please provide the code for that.

(https://i.stack.imgur.com/BM4yI.jpg)