Image previews

[Numan]

I would like to see image previews for files being uploaded similar to what you see here: http://blueimp.github.com/jQuery-File-Upload/ 

How can I do that? Does this require HTML 5 File API support? Is this something on KendoUI roadmap?

Thanks!

[T. Tsonev]

Hi,

Thank you for bringing this feature to our attention. For the moment the answer is no, but we'll consider implementing it in the Upload.

That said, the component that takes care of showing previews can be used separately and some form of integration should be possible.

Regards,
Tsvetomir Tsonev
the Telerik team

[WaspDeveloper]

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.

[Dave]

Any update on this? Is this still not available? I'd like to display a preview of the image that the user just uploaded (i'm doing an async auto-upload).

[T. Tsonev]

Hi,

There is no built-in support for this yet. Our recommendation is to return a preview URL from the save handler and display it on the page.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Rinck]

I would like to see this feature included in the next version as well! An example of a jquery plugin that does this (image preview) very nicely is:  http://blueimp.github.com/jQuery-File-Upload/

[Dennis]

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.

[20Below]

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

[md]

Thanks for your post.

[Masaab]

Good Works.  i used a Different approach previously storing it ina temp folder and than displaying. But ur trick seems simple to use.

[Sarath]

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.

[Masaab]

check if the mapImage variable has the content of the new image. if not you need to clear the cache memory. It would be good if you can  post you code.

[Dimiter Madjarov]

Hello guys,

You could post this feature as q request in the Kendo UI User Voice portal. This way we could determine how many users need it and decide whether to implement it in future versions.

Regards,
Dimiter Madjarov
Telerik

 

 

[Sarath]

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

[Thanh]

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

[Kedarnath]

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)

[Kedarnath]

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)

[Kedarnath]

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>

[Dimiter Madjarov]

Hello Kedarnath,

Previewing the images could be achieved using HTML5 FileReader in the select event handler of the Upload widget. The approach is general (not specifically related to Kendo UI) and is supported in modern web browsers only (which support HTML5 File API). Here is an example of this.

Regards,
Dimiter Madjarov
Telerik by Progress