how to display thumnail or preview for current file upload

Question

I'm having trouble to display the preview of the video/image being loaded

Basically I mean to say below code is not firing to get video/image preview

It is my Jsfiddle

.bind('fileuploadprocessalways', function(e, data)
  {
      var canvas = data.files[0].preview;
      var dataURL = canvas.toDataURL();
      $("#some-image").css("background-image", 'url(' + dataURL +')');

  })

Question: please help me to have preview of video/image being uploaded

here is my complete code

html:

<input id="fileupload" type="file" name="files[]" multiple>
<div class="progress">
    <div class="meter" style="width: 0%;"></div>
</div>
<div class="data"></div>
<div id="some-image"></div>

javascript:

$(function () {
    $('#fileupload').fileupload({
        url: '/echo/json/',
        maxChunkSize: 1048576,
        maxRetries: 3,
        dataType: 'json',
        multipart: false,
        progressall: function (e, data) {
          //progress
        },
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo('.data');
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        },
        fail: function (e, data) {
            data.context.text('Upload failed.');

        }
    }).bind('fileuploadprocessalways', function(e, data)
     {
         var canvas = data.files[0].preview;
         var dataURL = canvas.toDataURL();
         $("#some-image").css("background-image", 'url(' + dataURL +')');

      })
});

Answer 1

Here is a sample how to capture video thumbnail using jQuery. The idea is to have fileupload, then load the video using video element set the video currentTime to some random time to get the thumbnail and draw the video using canvas.

$(function() {
    var video = $("video");
    var thumbnail = $("canvas");
    var input = $("input[type=file]");
    var ctx = thumbnail.get(0).getContext("2d");
    var duration = 0;
    var img = $("img");

    input.on("change", function(e) {
        var file = e.target.files[0];
        // Validate video file type
        if (["video/mp4"].indexOf(file.type) === -1) {
            alert("Only 'MP4' video format allowed.");
            return;
        }
        // Set video source
        video.find("source").attr("src", URL.createObjectURL(file));
        // Load the video
        video.get(0).load();
        // Load metadata of the video to get video duration and dimensions
        video.on("loadedmetadata", function(e) {
            duration = video.get(0).duration;
            // Set canvas dimensions same as video dimensions
            thumbnail[0].width = video[0].videoWidth;
            thumbnail[0].height = video[0].videoHeight;
            // Set video current time to get some random image
            video[0].currentTime = Math.ceil(duration / 2);
            // Draw the base-64 encoded image data when the time updates
            video.one("timeupdate", function() {
                ctx.drawImage(video[0], 0, 0, video[0].videoWidth, video[0].videoHeight);
                img.attr("src", thumbnail[0].toDataURL());
            });
        });
    });
});

video, canvas {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="video/mp4" />
<video controls>
    <source type="video/mp4">
</video>
<canvas></canvas>
<br/>
<img/>

To determines whether the specified media type can be played back you can use this code:

var obj = document.createElement("video");
console.info("video/avi: ", obj.canPlayType("video/avi")  || "no");
console.info("video/mp4: ", obj.canPlayType("video/mp4"));

Possible values are:

• "probably": The specified media type appears to be playable.
• "maybe": Cannot tell if the media type is playable without playing it.
• "": The specified media type definitely cannot be played.

Answer 2

I think some thing like this.

<input id="fileupload" type="file" name="files[]" multiple>
<div class="progress">
    <div class="meter" style="width: 0%;"></div>
</div>
<div class="data"></div>
<div id="some-image">
    <img id="uAvata" alt="" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $("#fileupload").change(function(evt) {
        var fileUpload = $(this).get(0).files;
        readURL(this, "#uAvata");
    });
    //Preview image
    function readURL(inputFile, imgId) {
        if (inputFile.files && inputFile.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $(imgId).attr('src', e.target.result);
            }
            reader.readAsDataURL(inputFile.files[0]);
        }
    }
    // Preview video will read video like: @xxxmatko
</script>