Display files on the Kendo File Upload Area

[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,

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

 

 

[Joshua]

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))

[Veselin Tsvetanov]

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