JSFiddle - React, Tailwind, and code Playground

by stratdaz

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<div id="main" class="container">
    <div class="row">
        <div class="col-md-6">
            <input name="signature"
                   type="file"
                   data-role="upload"
                   data-show-file-list="false"
                   data-async="{ saveUrl: 'save', removeUrl: 'remove', autoUpload: false }"
                   data-bind="events: { select: onSelect }">
            </input>
        </div>
        <div>
            <img id="MyImage" style="width: 200px" />
        </div>
    </div>
</div>

JavaScript

(function ($, kendo) {
    var viewModel = kendo.observable({
        isEnabled: true,
        isVisible: true,
        onComplete: function(e)
        {
            // 
        },
        onSelect: function(e) {
            var fileReader = new FileReader();
            fileReader.onload = function (event) {
                console.log(event);
                var mapImage = event.target.result;
                $("#MyImage").attr('src', mapImage);                      
            }
            fileReader.readAsDataURL(e.files[0].rawFile);
        }
    });
    
    kendo.bind("#main", viewModel);
 
})(jQuery, kendo);