JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<section>
     <h1>Edit your profile: UserName</h1>

    <article>
        <div style="height:0px;overflow:hidden">
            <form action="uploadavatar.php" method="POST" enctype="multipart/form-data" name="avatarForm" id="avatarForm">
                <input type="file" id="avatarInput" name="avatarInput" />
            </form>
        </div>
        <p> <span class='label_viewprofile'>Avatar (65x65):</span>

            <label id="avatarBtn">
                <img src="avatar/avatar.jpg" class="avatar-box" />
            </label>
        </p>
        <hr class="editprofile-line">
    </article>
</section>

JavaScript

$(function () {
    $("#avatarBtn").click(function () {
        $("#avatarInput").click();
    });

    $("input[name='avatarInput']").on("change", function () {
        $('form#avatarForm').submit();
    });

    $('form#avatarForm').submit(function (e) {
        e.preventDefault();

        var formData = new FormData($(this)[0]);

        /*
        $.ajax({
            url: 'uploadavatar.php',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
                alert(returndata);
            }
        });
        */
        console.log("Submit triggered. " + formData );
        return false;
    });
});