Kendo file uploader to display previously uploaded files

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 in the uploaded area,ie the area where I upload files.(Take byte array content of files from database and the convert it into Base64 string thees section is I did)
     
    Code:
     
    <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"><h2>
     
             <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,

    I covered the question in the other threads on the same topic. Please avoid posting multiple ones regarding the same problem.

    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