Форма поля тега изображения

Question

Я хочу создать фигуру человеческого лица, и когда пользователь нажимает на эту фигуру, в нее добавляется тег файла изображения для загрузки.

Это то, какую фигуру мне нравится создавать, и когда я нажимаю на этот файл формы загрузки. https://drive.google.com/open?id=17afw87mymqgM37BV2mO3B6BqU32K6Zpz

хочу, чтобы входной файл входил в форму

<section class="container">
    <h1>UPLOAD PHOTO</h1>
    <h2>With Vertically and Horizontally Aligned Text</h2>
</section><!-- .container -->
<section class="shape-section">
    <div class="container diamond-shape">
        <div class="item-count">
            <br><br><br>
            <div style="margin-left: -9rem;">
                <form action="#" method="post">
                    @csrf
                    <div class="form-group form-group-lg">
                        <span>Upload Photo</span><br><br><br>
                        <input style="width: 22rem; display: initial;" 
                   class="form-control" type="file" name="photo">
                    </div><br>
                    <button class="btn btn-success" 
                     type="submit">Submit</button>
                </form>
            </div>
        </div><!-- .item-count -->
    </div><!-- .container .diamond-shape-->
</section><!-- .shape-section -->