JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<form autocomplete="off" class="basicForm" id="basicForm" method="POST" novalidate>
<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="SelectFile" 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>
       <input type="submit" class="btn-next" id="btn-Next" value="Next"/>
 </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 {
           ...

JavaScript

$(document).ready(function () {
     $(".error_msge").hide();
     var $deleteBtn  = $("#btn_del"),
         $sendBtn    = $('#btn_send'),
         $fileInput  = $(".upload"),
         $preview    = $("#imageUploadForm"),
         $errorLabel = $('#upload_error'),
         $imagecontainer  = $('#upload_image');
 
    	$deleteBtn.on("click", resetForm).hide();
        $sendBtn.on("click", sendImage).hide();
        $fileInput.on("change", showImage);
        
    	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
                    $deleteBtn.show();
                    $sendBtn.show();
                    $imagecontainer.hide();
                };
                // Read the local file
   ...