How do I get Javascript to add an uploaded image to a form.

<form id="form-essentials" action="URL IN HERE" method="post" enctype="multipart/form-data">

    (VARIOUS INPUT IN HERE)

    <!-- Photo Info -->
    <input id="photo" type="file" name="photo" value="PHOTOHERE">
    </div>
</form>

<!-- Photo -->
<div id="photocard" class="card white hide">
    <h1>Upload a photograph</h1>
    <div id="droparea">
        <input type="file" id="uploadfiles" accept="image/*, video/*" hidden>
        <div id="btn-browse" class="inset">
            <button><span class="btn-text">Browse</span></button>
        </div>
        <input type="file" id="userphoto" capture="user" accept="image/*" hidden>
        <div id="btn-takephoto" class="inset">
            <button><span class="btn-text">Take Photo</span></button>
        </div>


        <small>OR DRAG IMAGE INTO DOTTED AREA</small>
        <div id="image" class="hide">
            <div><img id="picture"></div>
            <input id="filename" type="hidden" value="imagedata">
        </div>
    </div>
</div>