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

Image previews

18 Answers 1802 Views

Upload

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

18 Answers, 1 is accepted

answered on 11 Dec 2012, 11:04 PM

I understand the upload control does not provide this feature at this time. I am attempting to add this on my end. (I haven't taken a look at the link to the other component yet). What I was doing with a regular file input, was getting the full path from the input return and then I could load it with the FileReader. So, is there a way to get the full path from the kendo upload control?

Also, I was looking at the select event. I noticed there is a "rawFile" parameter for the event. (link to doc: http://docs.kendoui.com/api/web/upload#select ) Does this load the file into memory? (would I be able to get the data bytes of the file from there? .. if so, then I wouldn't need a full path and to use the FileReader to load the file)

UPDATE: I can use the rawFile parameter as input to FileReader to accomplish what I am trying to do.

answered on 07 Aug 2013, 09:38 AM

Hi, guys.

I wanted to share this one with the community:

Although it would be nice for the Kendo team to bring this feature out of the box (with different legacy fallbacks maybe even), implementing file previews by yourself is not that hard with a combination of the select event and the javascript file API.

$("#ProfilePicture").kendoUpload({

async: {

saveUrl: 'http://mywebsite/api/ImageUpload',

autoUpload: false

},

select: function (e) {

var fileReader = new FileReader();

fileReader.onload = function (event) {

console.log(event);

var mapImage = event.target.result;

$("#MyImage").attr('src', mapImage);

}

fileReader.readAsDataURL(e.files[0].rawFile);

},

multiple: false,

});

So as you can see all you need is a few lines of code in the select event. you need to make na instance of the FileReader class. You then attach an onload event to the class the event has an event argument with a target.result property. That is your link to your image. So you need to map that to an image in your DOM.

When you have an event you just need to fire the fileReader and pass it a raw file. The select element exposes a rawFile property as seen in fileReader.readAsDataURL(e.files[0].rawFile);

Once its finished the onload event gets fired and the image gets rednered.

answered on 12 Aug 2013, 04:26 PM

You will run into cross browser issues (IE < 10 and Safari < 6) using the FileReader API, not supported.
http://caniuse.com/filereader
Use this HTML:

<img id="image-preview" src="" width="50" style="display: none; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)" />

Try this instead within Select function:

01.if (!!window.FileReader && Modernizr.draganddrop) {

02. var reader = new FileReader();

03. reader.onload = function (e) {

04. var imagePreview = $('#image-preview');

05. imagePreview.attr('src', e.target.result);

06. imagePreview.show();

07. }

08.

09. reader.onloadend = function (e) {

10. reloadMasonry();

11. }

12.

13. reader.readAsDataURL(selectEvent.files[0].rawFile);

14. imageIsAttached = true;

15.

16. showSaySomethingControls();

17. } else {

18.

19. var file = selectEvent.sender.element[0];

20. var imagePreviewElement = document.getElementById('image-preview');

21. if (document.all)

22. //imagePreviewElement.src = file.value;

23. imagePreviewElement.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = file.value;

24. else

25. imagePreviewElement.src = file.files.item(0).getAsDataURL();

26. if (imagePreviewElement.src.length > 0)

27. imagePreviewElement.style.display = 'block';

28.}

answered on 05 Jan 2015, 10:25 AM

capture.png

That works fine for a single image. But i'm using the upload control for uploading multiple files. And whenever multiple images are uploaded then all the image previews are overwritten by the last image preview.

answered on 06 Jan 2015, 10:22 AM

capture.png

I'm not using the mapImage variable. Im just using plain javascript to preview the images that are selected. Here's my code. I also attached the image which shows the first image preview getting overwritten by the second image preview.

@(Html.Kendo().Upload()

.Name("files").

TemplateId("fileTemplate")

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

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

function onSelect(e) {

$.each(e.files, function (index, value) {

readMultipleFiles(value);

});

}

function readMultipleFiles(file) {

var reader = new FileReader();

reader.onload = function (e) {

// bind the file content

$("img").attr({ src: e.target.result });

}

reader.readAsDataURL(file.rawFile);

}

</script>

<style scoped>

.file-icon {

display: inline-block;

float: left;

width: 48px;

height: 48px;

margin-left: 10px;

margin-top: 13.5px;

}

#example .file-heading {

font-family: Arial;

font-size: 1.1em;

display: inline-block;

float: left;

width: 450px;

margin: 0 0 0 20px;

height: 25px;

-ms-text-overflow: ellipsis;

-o-text-overflow: ellipsis;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

#example .file-name-heading {

font-weight: bold;

}

#example .file-size-heading {

font-weight: normal;

font-style: italic;

}

li.k-file .file-wrapper .k-upload-action {

position: absolute;

top: 0;

right: 0;

}

li.k-file div.file-wrapper {

position: relative;

height: 75px;

}

</style>

answered on 24 Jun 2015, 04:31 AM

Hello Sarath !

I add something to your code and it's work.

@(Html.Kendo().Upload()

.Name("files").

TemplateId("fileTemplate")

.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)#'/> 

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

.file-icon {

display: inline-block;

float: left;

width: 48px;

height: 48px;

margin-left: 10px;

margin-top: 13.5px;

}

#example .file-heading {

font-family: Arial;

font-size: 1.1em;

display: inline-block;

float: left;

width: 450px;

margin: 0 0 0 20px;

height: 25px;

-ms-text-overflow: ellipsis;

-o-text-overflow: ellipsis;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

#example .file-name-heading {

font-weight: bold;

}

#example .file-size-heading {

font-weight: normal;

font-style: italic;

}

li.k-file .file-wrapper .k-upload-action {

position: absolute;

top: 0;

right: 0;

}

li.k-file div.file-wrapper {

position: relative;

height: 75px;

}

</style>

answered on 08 Aug 2016, 10:39 AM

requirement.jpg

current_result.jpg

Hi Sir, Here I am shearing my index.cshtml code.What changes are needed in this code for get Preview of Uploaded File
<div class="box">
<p>Welcome<p>
</div>
<form method="post" action='@Url.Action("Submit")'>
<div class="demo-section k-content">
@(Html.Kendo().Upload()
.Name("files")
)
<p style="padding-top: 1em; text-align: right">
<input type="submit" value="Submit" class="k-button k-primary" />
</p>
</div>
</form>
I use a submit button for upload file and also use same button for submit other things(not use Upload Files button,automatically shown when we upload files)

answered on 08 Aug 2016, 10:46 AM

requirement.jpg

current_result.jpg

Here I am shearing my index.cshtml code.What changes are needed in this code for get Preview of Uploaded File

I use a submit button for upload file and also use same button for submit other things(not use Upload Files button,automatically

<div class="box"><h4>Information</h4><p> The Upload can be used as a drop-in replacement for file input elements. This "synchronous" mode does not require special handling on the server. </p></div><form method="post" action='@Url.Action("Submit")'><div class="demo-section k-content"> @(Html.Kendo().Upload() .Name("files") ) <p style="padding-top: 1em; text-align: right"><input type="submit" value="Submit" class="k-button k-primary" /></p></div></form>

<div class="box">

<h4>Information</h4>

<p>

The Upload can be used as a drop-in replacement

for file input elements. This "synchronous" mode does not require

special handling on the server.

</p>

</div>

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

<div class="demo-section k-content">

@(Html.Kendo().Upload()

.Name("files")

)

<p style="padding-top: 1em; text-align: right">

<input type="submit" value="Submit" class="k-button k-primary" />

</p>

</div>

</form>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Image previews

18 Answers, 1 is accepted