Client-side image previews

author(s): Davit Barbakadze

by 2Yootz

HTML

<script src="http://rawgithub.com/moxiecode/plupload/master/js/plupload.full.min.js"></script>
<h2>Client-side image previews</h2>

<button id="pick-files" style="visibility:hidden">Pick up some images...</button>

<ul id="gallery"></ul>

<pre id="console"></pre>

CSS

#gallery {
    padding: 0;
    margin: 20px 0 0;
}

#gallery li {
    list-style: none;
    float: left;
    margin: 7px;
    padding: 5px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-backface-visibility: hidden;
}

#gallery li img,
#gallery li canvas {
    display: block;
}

JavaScript

// jQuery not really required, it's here to overcome an inability to pass configuration options to the fiddle remotely
$(document).ready(function() {

	var uploader = new plupload.Uploader({
		//runtimes : 'html5,flash,silverlight',
        runtimes: 'html5',
		browse_button : 'pick-files', 
		max_file_size : '30mb',
		url: "/echo/json",
      //  flash_swf_url : 'http://rawgithub.com/moxiecode/moxie/master/bin/flash/Moxie.cdn.swf',
		//silverlight_xap_url : 'http://rawgithub.com/moxiecode/moxie/master/bin/silverlight/Moxie.cdn.xap',
        
        filters : [
			{title : "Image files", extensions : "jpg,png"}
		],

		init: {
			PostInit: function() {
				document.getElementById('pick-files').style.visibility = 'visible';
			},

			FilesAdded: function(up, files) {
                    
				plupload.each(files, function(file) {
					var img = new o.Image();
                    
                    img.onload = function() {
                        // create a thumb placeholder
                        var li = document.createElement('li');
                        li.id = this.uid;
                        document.getElementById('gallery').appendChild(li);
                        
                        // embed the actual thumbnail
                        this.embed(li.id, {
                            width: 100,
                            height: 60,
                            crop: true
                        });
                    };
                    
                    // drop thumbnails at different angles (optional eye candy)
                    /*
                    img.onembedded = function() {
                        plupload.each(['', '-ms-', '-webkit-', '-o-', '-moz-'], function(prefix) {
                            document.getElementById(img.uid).style[prefix + 'transform'] = 'rotate('+ (Math.floor(Math.random() * 6) - 3) + 'deg)';
                        });
                    };
                    */
                   ...