Click here to Skip to main content
15,889,096 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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)

What I have tried:

@* The file Upload code,What changes are I done this code for display files in the Uploaded area ?


File Upload Example



<form method="post" action='@Url.Action("Save")'>
<h2>

Upload Attachments


@(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">


<img class='file-icon #=addExtensionClass(files[0].extension)#' /> <!-- here im trying to bind the image -->
@*

Name: #=name#


Size: #=size# bytes

*@
<button type='button' class='k-upload-action'></button>

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

</form>
Posted
Updated 10-Aug-16 1:00am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900