73 replies

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

I while ago I did a project on icodethis and now am actually utilising it.

Here it is on CodePen https://codepen.io/iBlackwolf/pen/NPGGLRV

(Ignore the simulated "upload")

Line 125 in the Javascript shows the image data in the console

I can't for the life of me figure out how to get the image data into a HTML form input, so it can be submitted to my PHP script.

EDIT: This is basically what I have ...

<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>

<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>

<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>

<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>

CodePenBlackwolf

Upload Media

...

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

Similar Threads