DevExtreme FileUploader
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.2.3/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.2.3/css/dx.light.css">
<script src="http://cdn3.devexpress.com/jslib/14.2.4/js/dx.phonejs.js"></script>
<div id="fileUploader" data-bind="dxFileUploader: { buttonText: '', labelText: '', accept: 'image/*' }"></div>
CSS
.dx-fileuploader,
.dx-fileuploader * {
display: inline-block;
margin: 0;
vertical-align: middle;
}
.dx-fileuploader-input-container {
display: none;
}
.dx-fileuploader-wrapper,
.dx-fileuploader-input-wrapper{
padding: 0;
border: none;
}
/* Uncomment if you need to hide selected files information too*/
.dx-fileuploader-files-container {
display: none;
}
JavaScript
$(function() {
ko.applyBindings({});
$("#fileUploader").find(".dx-button").dxButton("option", "icon", "arrowup");
});