JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div id="uploadBatchWindow">
<div style="padding: 4px; margin-bottom: 10px;">
Acceptable file types: .xml<br/>File size limit: 5MB
</div>
<input type="file" name="batchFile" id="batchFile" title="Select file" />
<div id="upload-error" class="k-state-selected" style="padding: 4px; margin-top: 10px; display: none"></div>
</div>
JavaScript
//Init upload control
$("#batchFile").kendoUpload({
async: {
saveUrl: '/Upload',
autoUpload: false
},
multiple: false,
localization: {
select: "Select a file",
uploadSelectedFiles: "Send"
}
});
var win = $("#uploadBatchWindow")
.kendoWindow({
actions: ["Maximize", "Close"],
animation: {
open: {
effects: "slideIn:down fadeIn",
duration: 500
},
close: {
effects: "slide:up fadeOut",
duration: 500
}
},
wrapper:{
css:{top:200,left:150}
},
minWidth: 400,
modal: true,
resizable: true,
title: "Choose File to Upload",
visible: true
})
.data("kendoWindow").center().toFront();