Display files on the Kendo File Upload Area

2 posts, 0 answers
  1. Kedarnath
    Kedarnath avatar
    6 posts
    Member since:
    Dec 2015

    Posted 10 Aug Link to this post

    I am using Kendo File Upload for upload files and after uploading I convert the file to Byte array and save it on Database in the Binary data format. My requirement is I want to display the uploaded files(Take byte array content of files from database and the convert it into Base64 string  and pass to View using View Bag,thees section is I I did) in the uploaded area,ie the area where I upload files.
        V<img src="@ViewBag.ImageData" />    @*ImageData Contain the files,taken from Dtabase
    @* The file Upload code,What changes are I done this code for display files in the Uploaded area ?
    <div class="box">
            File Upload Example
    <form method="post" action='@Url.Action("Save")'>
        <div class="demo-section k-content">
             <h6>Upload Attachments</h6>
        .Messages(m => m.Select("Add files here."))
        .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>
        var a = 0;
        function onSelect(e) {
            $.each(e.files, function (index, value) {
        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 });
            <style scoped>
                    width: 350px;
                    float: right;
                    background-color: #f7f7f7;
                    padding: 20px;
                    border: 1px solid #dbdbdb;
                .demo-section .k-widget.k-upload.k-header{
                    border-radius: 0px;
                    border: none;
                    background-color: #F7F7F7;
                .demo-section .k-upload-files{
                    width: 100%;
                    overflow: hidden;
                    background-color: #fff;
                    border: none;
                    min-height: 235px;
                .demo-section .k-upload-files .k-file{
                    width: 48%;
                    float: left;
                    border: none;
                    padding-left: 0px;
                .demo-section .k-dropzone{
                    background-color: #fff;
                    border-bottom: none;
                    margin-bottom: 30px;
               .demo-section .k-dropzone .k-button.k-upload-button{
                    height: 75px;
                    border: 1px dashed #000;
                    width: 100%;
                    background-color: #fff;
                    border-radius: 0px;
                    padding-top: 26px;
                    background-position: 0px;
                    box-shadow: none;
               .demo-section .k-dropzone .k-button.k-upload-button input{
                   background-color: #fff;
                   box-shadow: none;
                .file-icon {
                    /*display: inline-block;
                    float: left;
                    width: 80px;
                    height: 80px;
                    margin-left: 42px;
                    margin-top: 45.5px;*/
                    width: auto;
                    height: 135px;
                    max-height: 100%;
                    max-width: 100%;
                li.k-file .file-wrapper .k-upload-action {
                    position: absolute;
                    top: 0;
                li.k-file div.file-wrapper {
                    position: relative;
                    height: 100px;
                    padding: 15px;
  2. Dimiter Madjarov
    Dimiter Madjarov avatar
    2123 posts

    Posted 11 Aug Link to this post

    Hello Kedarnath,

    You could check the following approach for displaying initial files in the widget:


    Nevertheless it does not rely on the actual files, but on metadata provided by the developer in an array.

    .Files(files =>
        foreach (var f in Model)

    Dimiter Madjarov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top