Image previews

19 posts, 0 answers
  1. Numan
    Numan avatar
    11 posts
    Member since:
    Jan 2012

    Posted 27 Jan 2012 Link to this post

    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!

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2788 posts

    Posted 02 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. WaspDeveloper
    WaspDeveloper avatar
    6 posts
    Member since:
    Apr 2009

    Posted 11 Dec 2012 Link to this post

    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.
  4. Dave
    Dave avatar
    36 posts
    Member since:
    Jan 2008

    Posted 13 Mar 2013 Link to this post

    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).
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2788 posts

    Posted 19 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Rinck
    Rinck avatar
    23 posts
    Member since:
    Feb 2013

    Posted 05 Apr 2013 Link to this post

    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/
  7. Dennis
    Dennis avatar
    24 posts
    Member since:
    Oct 2012

    Posted 07 Aug 2013 Link to this post

    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.


  8. 20Below
    20Below avatar
    20 posts
    Member since:
    Mar 2011

    Posted 12 Aug 2013 Link to this post

    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.}
  9. md
    md avatar
    1 posts
    Member since:
    Oct 2013

    Posted 24 Dec 2013 Link to this post

    Thanks for your post.
  10. Masaab
    Masaab avatar
    15 posts
    Member since:
    Nov 2013

    Posted 07 May 2014 in reply to Dennis Link to this post

    Good Works.  i used a Different approach previously storing it ina temp folder and than displaying. But ur trick seems simple to use.
  11. Sarath
    Sarath avatar
    2 posts
    Member since:
    Jan 2015

    Posted 05 Jan 2015 in reply to Dennis Link to this post

    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.
  12. Masaab
    Masaab avatar
    15 posts
    Member since:
    Nov 2013

    Posted 05 Jan 2015 in reply to Sarath Link to this post

    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.
  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 06 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14. Sarath
    Sarath avatar
    2 posts
    Member since:
    Jan 2015

    Posted 06 Jan 2015 in reply to Masaab Link to this post

    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>
  15. Thanh
    Thanh avatar
    1 posts
    Member since:
    Jun 2015

    Posted 23 Jun 2015 Link to this post

    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>

  16. Kedarnath
    Kedarnath avatar
    6 posts
    Member since:
    Dec 2015

    Posted 08 Aug 2016 in reply to Dennis Link to this post

    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)

  17. Kedarnath
    Kedarnath avatar
    6 posts
    Member since:
    Dec 2015

    Posted 08 Aug 2016 Link to this post

    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)
  18. Kedarnath
    Kedarnath avatar
    6 posts
    Member since:
    Dec 2015

    Posted 08 Aug 2016 Link to this post

    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>
  19. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 10 Aug 2016 Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top