how to get a video thumbnail using RadAsyncUpload ?

4 posts, 0 answers
  1. Rasheed
    Rasheed avatar
    32 posts
    Member since:
    Jan 2012

    Posted 03 Feb 2012 Link to this post

    i have a RadAsyncUpload which enables users to upload videos, i need to get thumbnails for each uploaded video, any help ?
  2. Bozhidar
    Bozhidar avatar
    1188 posts

    Posted 07 Feb 2012 Link to this post

    Hello Rasheed,

    This feature is not supported by our controls. To get an image from a video file you would need some other external library. After you get the image, you can then show the image as a thumbnail, using this example as a reference: 
    Kind regards,
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. Rasheed
    Rasheed avatar
    32 posts
    Member since:
    Jan 2012

    Posted 07 Feb 2012 Link to this post

    thanks for your reply 
    i've implemented this scenario using ffmpeg utility and after getting the image i've used the Rad Rotator control.

    thank you 
  4. Jhansi
    Jhansi avatar
    1 posts
    Member since:
    May 2012

    Posted 09 May 2012 Link to this post

    hello friends, 
    i am using html5 and JavaScript to upload the image using file API, it is working good Firefox but in chrome i am not getting the thumbnail of image, 
    my code is.......
      .thumb {
        height: 75px;
        border: 1px solid #000;
        margin: 10px 5px 0 0;

    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>

      function handleFileSelect(evt) {
        var files =; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

          // Only process image files.
          if (!f.type.match('image.*')) {

          var reader = new FileReader();

          // Closure to capture the file information.
          reader.onload = (function(theFile) {
            return function(e) {
              // Render thumbnail.
              var span = document.createElement('span');
              span.innerHTML = ['<img class="thumb" src="',,
                                '" title="', escape(, '"/>'].join('');
              document.getElementById('list').insertBefore(span, null);

          // Read in the image file as a data URL.

      document.getElementById('files').addEventListener('change', handleFileSelect, false);
Back to Top