Display files on the Kendo File Upload Area

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

    Posted 10 Aug 2016 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
    2310 posts

    Posted 11 Aug 2016 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. Joshua
    Joshua avatar
    1 posts
    Member since:
    Jun 2018

    Posted 01 Nov 2019 in reply to Dimiter Madjarov Link to this post

    What about if you just want to show one initial file? I have my upload functionality in a Grid Popup Editor but the Model values are always undefined for the Initial file configuration and I don't know why.

    .Files(f => f.Add().Name(Model.Filename).Extension(Model.Extension).Size(Model.FileSize))
  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 05 Nov 2019 Link to this post

    Hello Joshua,

    Because other developers may encounter the same issue, I will post below my answer from the support thread that you have opened on the same topic (with the valuable addition that you have provided).

    The issue, in this case, is that the pop-up edit template is actually a client-side template. It will be evaluated once on the initial load of the Grid when it will not know about the actual file that needs to be loaded in its Upload widget.

    In order to resolve that issue, I would suggest you place a simple <input type="file"/> on the template:

    <input type="file" id="uploadedFile" name="uploadedFile"/>

    And initialize the widget on the go in the Edit event of the Grid:

    function onEdit(e) {
    	var model = e.model;
    	var file = {
    		extension: model.Extension,
    		fileSize: model.FileSize,
    		name: model.Filename
    	};
    
    	e.container.find('#uploadedFile').kendoUpload({
    		success: uploadSuccess,
    		error: uploadError,
    		multiple: false,
    		async: {
    			saveUrl: "/Documents/DocumentSave",
    			autoUpload: true,
    			removeUrl: "/Documents/DocumentDelete"
    		},
    		validation: {
    			allowedExtensions: [".pdf", ".PDF", ".Pdf"]
    		},
    		files: [file]
    	});
    }

    Regards,
    Veselin Tsvetanov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top