JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css">
    <form id="form1" runat="server">
        <input type='file' id="imgInp" data-bind="events: {change: fileChange}" />
        <img id="logo" data-bind="attr: { src: company.Logo }" style="width: 340px" />
    </form>

JavaScript

var viewModel = kendo.observable({
    company: {
        Logo: ""
    },
    fileChange: function (e) {
        var input = e.target,
            that = this;
        
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                that.set("company.Logo", e.target.result);                        
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
});
kendo.bind($("body"), viewModel);