Kendo Upload with Display File

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: });
            <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
    2122 posts

    Posted 11 Aug Link to this post

    Hello Kedarnath,

    Is this thread a duplicate of the other one on the same topic? If that is the case, we could keep the discussion there.

    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