JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form autocomplete="off" class="basicForm" id="basicForm" method="POST">
    <span id="error_message" class="error_msge">

    </span>
    <div class="choose_file pull-right" id="imageUploadForm">
        <!--<span style="color:black;text-align:center;">Add Photo</span>    -->
        <input name="Select File" class="upload" type="file" />

        <div class="container_image" id="upload_image"></div>
        <label id="upload_error"></label>
    </div>

    <div class="pull-right">
        <input type="button" id="btn_del" class="btn_del" value="Delete">
            <input type="button" id="btn_send" value="Submit">
                </div>
            <button class="btn-next" id="btn-Next" >Next</button>     
            </form>

CSS

.error_message {
    background-color: lightcoral;
    color:white;
    border:1px solid red;
    text-align: center;
}
.errRed {
    color: black !important;
    border: 1px solid #EA373D !important;
    padding: 6px !important;
}
.error_msge {
    border:1px solid red;
    width: 450px;
    margin: 0px auto;
    text-align: center;
    background-color: #FFBABA!important;
    padding: 5px;
}
.photo_Error {
    color:red;
}
.choose_file {
    border: 1px solid DarkGrey;
    color: #7f7f7f;
    display: inline-block;
    font: 14px Myriad Pro,Verdana,Geneva,sans-serif;
    height: 108px;
    margin-top: 0;
    position: absolute;
    right: 37px;
    width: 138px;
    z-index: 9999;
}
.btn_del {
    width: 59px;
    height: 26px;
    background-color:#1f477a !important;
    border: none;
    border-radius: 0px;
    font-size: 12px;
    z-index: 9;
    position: relative;
    top: 58px;
    right: 34px;
    color:white;
}
.c {
    width:80px;
    height:30px;
    background-color:darkGrey !important;
    border:none;
}
#btn_send {
    background-color:#1f477a !important;
    width: 59px;
    height: 26px;
    border: none;
    border-radius: 0px;
    font-size: 12px;
    z-index: 9;
    position: relative;
    top: 58px;
    right: 24px;
    color:white;
}
.icon_pos{
    font-size: 16px;
    position: absolute;
    right: -17px;
    top: 0;
}
input.upload{
    bottom: 0;
    cursor: inherit;
    font-size: 10px;
    height: 100%;
    margin: 0;
    opacity: 0;
    outline: medium none;
    padding: 0;
    position: relative;
    right: 2px;
    top: -2px;
    width: 100%;
}
#imageUploadForm {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

JavaScript

$(document).ready(function () {
    $(".error_msge").hide();
    //Photo upload script starts here

    /*
         * Store elements in variables, so jQuery does not have
         * to search for them every time.
         */
    var $deleteBtn  = $("#btn_del"),
        $sendBtn    = $('#btn_send'),
        $fileInput  = $(".upload"),
        $preview    = $("#imageUploadForm"),
        $errorLabel = $('#upload_error'),
        $imagecontainer  = $('#upload_image');
    /*
         * Define event listeners, and hide the buttons
         */
    $deleteBtn.on("click", resetForm).hide();
    $sendBtn.on("click", sendImage).hide();
    $fileInput.on("change", showImage);
    /*
         * Function declarations
         */
    function resetForm() {
        // Clear the preview
        $preview.css("background-image", "none");
        // Hide the buttons
        $deleteBtn.hide();
        $imagecontainer.show();
        $sendBtn.hide();
        // Empty the error message
        $errorLabel.text('');
        // Enable file selection
        $fileInput.prop('disabled', false);
    }



    function showImage() {
        var files = !! this.files ? this.files : [];
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg)$/;
        // No file selected, or no FileReader support
        if (!files.length || !window.FileReader) return;

        // If the file is a JPEG image
        if (regex.test(files[0].type)) {
            // Create an instance of FileReader
            var reader = new FileReader();
            // Declare the onload callback before reading the file
            reader.onload = function () {
                // Set image data as background of div
                $preview.css("background-image", "url(" + this.result + ")");
                // Empty the error message
                $errorLabel.text('');

                // Disable file selection
                $fileInput.prop('disabled', true);
                // Show the buttons
               ...