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.
     
    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>
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 11 Aug Link to this post

    Hello Kedarnath,

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

    http://demos.telerik.com/aspnet-mvc/upload/initialfiles

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

    .Files(files =>
    {
        foreach (var f in Model)
        {
            files.Add().Name(f.Name).Extension(f.Extension).Size(f.Size);
        }
    })

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top