This is a migrated thread and some comments may be shown as answers.

Display files on the Kendo File Upload Area

3 Answers 731 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Kedarnath
Top achievements
Rank 1
Kedarnath asked on 10 Aug 2016, 08:06 AM
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>

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 11 Aug 2016, 08:42 AM

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.
 
0
Joshua
Top achievements
Rank 1
answered on 01 Nov 2019, 04:12 PM

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))
0
Veselin Tsvetanov
Telerik team
answered on 05 Nov 2019, 10:00 AM

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.
Tags
Upload
Asked by
Kedarnath
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Joshua
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or