Kendo Upload with Display File

[Kedarnath]

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.

Code:

@{
    V<img src="@ViewBag.ImageData" />    @*ImageData Contain the files,taken from Dtabase
}

<h2>Index</h2>


@* The file Upload code,What changes are I done this code for display files in the Uploaded area ?
<div class="box">
    <p>
        File Upload Example
    </p>
</div>
<form method="post" action='@Url.Action("Save")'>
    <div class="demo-section k-content">

         <h6>Upload Attachments</h6>

        @(Html.Kendo().Upload()
    .Name("files").
    TemplateId("fileTemplate")
    .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>
            </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>
            .demo-section{
                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;
                right:0;
            }

            li.k-file div.file-wrapper {
                position: relative;
                height: 100px;
                padding: 15px;

                /*float:left;
                width:50%;*/
            }
        </style>

    </div>


</form>

[Dimiter Madjarov]

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.

Regards,
Dimiter Madjarov
Telerik by Progress