I add something to your code and it's work.
@(Html.Kendo().Upload()
.Name(
"files"
).
TemplateId(
"fileTemplate"
)
.Async(a => a
.Save(
"Save"
,
"Upload"
)
.Remove(
"Remove"
,
"Upload"
)
.AutoUpload(
false
)).Events(events => events.Select(
"onSelect"
)))
<script id=
"fileTemplate"
type=
"text/x-kendo-template"
>
<span
class
=
'k-progress'
></span>
<div
class
=
'file-wrapper'
>
<img
class
=
'file-icon #=addExtensionClass(files[0].extension)#'
/> <!-- here im trying to bind the image -->
<h4
class
=
'file-heading file-name-heading'
>Name: #=name#</h4>
<h4
class
=
'file-heading file-size-heading'
>Size: #=size# bytes</h4>
<button type=
'button'
class
=
'k-upload-action'
></button>
</div>
</script>
<script>
var a = 0;
function onSelect(e) {
$.each(e.files, function (index, value) {
readMultipleFiles(value);
});
a++;
}
function addExtensionClass(extension) {
return
a;
}
function readMultipleFiles(file) {
var reader =
new
FileReader();
reader.onload = function (e) {
// bind the file content
$(
'.'
+a+
''
).attr({ src: e.target.result });
}
reader.readAsDataURL(file.rawFile);
}
</script>
<style scoped>
.file-icon {
display: inline-block;
float
: left;
width: 48px;
height: 48px;
margin-left: 10px;
margin-top: 13.5px;
}
#example .file-heading {
font-family: Arial;
font-size: 1.1em;
display: inline-block;
float
: left;
width: 450px;
margin: 0 0 0 20px;
height: 25px;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#example .file-name-heading {
font-weight: bold;
}
#example .file-size-heading {
font-weight: normal;
font-style: italic;
}
li.k-file .file-wrapper .k-upload-action {
position: absolute;
top: 0;
right: 0;
}
li.k-file div.file-wrapper {
position: relative;
height: 75px;
}
</style>