display image in browser on image upload

image.html

            <div class="row">
                <div class="col-xs-12 col-lg-8 col-lg-offset-2">
                    <label class="col-sm-4 col-xs-12 control-label">Upload Images</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="form-group">
                            {{--  Form::textarea('description','', ['class' => 'form-control form-control-solid placeholder-no-fix', 'rows'=>'5', 'cols'=>'20','placeholder'=>'Description', 'maxlength' => '2000']) --}}
                            <label class="f-label">Upload a New Image</label>
                            <input type="file" name="images[]" id="upload-image" multiple style="display:none" />
                            <div id="upload" class="drop-area">
                                Upload File
                            </div>
                            <p class="help-block" style="color: #333333">Max File Size 5 MB | Allowed File Type: jpeg, jpg, png</p>
                            @if ($errors->has('images'))
                            <span class="help-block">
                                <strong>{{ $errors->first('images') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-lg-8 col-lg-offset-2">
                    <label class="col-sm-4 col-xs-12 control-label"></label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="form-group" id="thumbnail">

                        </div>
                    </div>
                </div>
            </div>
<!--  
------------------------------------------- Images Display script --------------------------------------------------------
-->
<script>
    jQuery(function($){
        var fileDiv = document.getElementById("upload");
        var fileInput = document.getElementById("upload-image");
        console.log(fileInput);
        fileInput.addEventListener("change",function(e){
            $('#thumbnail').empty();
            var files = this.files;
            showThumbnail(files)
        },false);

        fileDiv.addEventListener("click",function(e){
            $(fileInput).show().focus().click().hide();
            e.preventDefault();
        },false);

        fileDiv.addEventListener("dragenter",function(e){
            e.stopPropagation();
            e.preventDefault();
        },false);

        fileDiv.addEventListener("dragover",function(e){
            e.stopPropagation();
            e.preventDefault();
        },false);

        fileDiv.addEventListener("drop",function(e){
            e.stopPropagation();
            e.preventDefault();

            var dt = e.dataTransfer;
            var files = dt.files;

            showThumbnail(files)
        },false);

        function showThumbnail(files){
            for(var i=0;i<files.length;i++){
                var file = files[i];
                var imageType = /image.*/;
                if(!file.type.match(imageType)){
                    console.log("Not an Image");
                    continue;
                }

                var image = document.createElement("img");
                // image.classList.add("")
                var thumbnail = document.getElementById("thumbnail");
                image.file = file;
                thumbnail.appendChild(image);

                var reader = new FileReader();
                reader.onload = (function(aImg){
                    return function(e){
                        aImg.src = e.target.result;
                    };
                }(image));
                var ret = reader.readAsDataURL(file);
                var canvas = document.createElement("canvas");
                ctx = canvas.getContext("2d");
                image.onload= function(){
                    ctx.drawImage(image,100,100)
                }
            }
        }
    });
</script>