client side image load for uploading

by SHELDON PASCIAK

HTML

<form method="POST" action="https://test.com" accept-charset="UTF-8" class="mainInformationContrainer" file="1">
    <ul>
    <li>
        <label>Picture</label>
        <div class="oneInfo thumbnail">
            <img src="https://pasciak.com/images/penguin.png" id="imageID"/>
        </div>
    </li>
    <li>
        <label>.</label>
        <div class="oneInfo" style="width: 200px; overflow: hidden">
            <span class="spanForFileInput">

                <input type="button" class="selectImage" value="Select"/>
                    <input type="file" value="Select Image" id="imgInp"/>
            </span>
            <input type="submit" value="upload"/>
        </div>
    </li>
    <li>
        <label>base64 Data</label>
        <div id="theinfo">
        </div>
    </li>
</ul>
</form>

CSS

.mainInformationContrainer{
    position: relative;
    width: 100%;
}
.mainInformationContrainer ul li{
    list-style: none;
    width: 100%;
    margin-bottom: 10px;
    overflow: auto;
}
.mainInformationContrainer ul li label{
    width: 15%;
    display: block;
    float: left;
    color: #444;
    font: 13px/1.7em "Open Sans", "trebuchet ms", arial, sans-serif;
}
.mainInformationContrainer ul li .oneInfo{
    width: 100%;
}

.mainInformationContrainer ul li .oneInfo span{
    width: 40%;
    color: #e5412d;
}
.mainInformationContrainer ul li  input[type="submit"], .mainInformationContrainer ul li  input[type="file"]{
    color: #ffffff;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    background-color: #e5412d;
    border-color: #dd301b;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius:4px;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
}
.mainInformationContrainer ul li  input[type="submit"]:hover{
    background-color: red;
}


.mainInformationContrainer ul li .oneInfo img{
 
    max-width: 100px;
    max-height: 100px;
}
.mainInformationContrainer ul li .oneInfo .spanForFileInput{
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#imgInp{
    position: absolute;
    top: 0;
    right:...

JavaScript

$(document).ready(function(){
    $("#imgInp").change(function(){
        readURL(this);
    });
    
    
});

/**
 * Trigger a callback when the selected images are loaded:
 * @param {String} selector
 * @param {Function} callback
  */
var onImgLoad = function(selector, callback){
    $(selector).each(function(){
        if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
            callback.apply(this);
        }
        else {
            $(this).on('load', function(){
                callback.apply(this);
            });
        }
    });
};

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();      

        reader.onload = function (e) {
            $('#imageID').attr('src', e.target.result);               
        }     
        
        reader.onloadend = function(event) {
            var contents = event.target.result,
                error    = event.target.error;

            if (error != null) {
                console.error("File could not be read! Code " + error.code);
            } else {
                // console.log("Contents: " + contents);
                document.getElementById("theinfo").innerHTML = contents;//"Paragraph changed!";
                
    //todo ----------------------------------------------------------------
		document.getElementById("imageID").classList="";
    //todo determine rotation and use CSS to fix it?
    document.getElementById("imageID").classList.add('rotateimg90');      
    //---------------------------------------------------------------------
                
            }
        };                
        reader.readAsDataURL(input.files[0]);        
    }
}