JSFiddle - React, Tailwind, and code Playground

by redoak2000

HTML

<script src="http://rawgithub.com/moxiecode/plupload/master/js/plupload.full.min.js"></script>
<div id="container">
    <div id="runtime">No runtime found.</div>
    <br />
    <a id="pickfiles" href="javascript:;">[Select files]</a> 
    <div id="preview"></div>
</div>

JavaScript

$(function(){
    
var uploader = new plupload.Uploader({
	runtimes : 'html5,flash',
	browse_button : 'pickfiles',
	container: 'container',
    url: "/echo/json",
	max_file_size : '10mb',
	filters : [
		{title : "Image files", extensions : "jpg,gif,png"}
	],
    flash_swf_url : 'http://rawgithub.com/moxiecode/moxie/master/bin/flash/Moxie.cdn.swf'
});

uploader.bind('Init', function(up, params) {
	$('#runtime').html("Current runtime: " + params.runtime);
});

uploader.init();

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(){
        
		var img = new mOxie.Image();

		img.onload = function() {
			this.embed($('#preview').get(0), {
				width: 800,
				height: 800,
				crop: true
			});
		};

		img.onembedded = function() {
			this.destroy();
		};

		img.onerror = function() {
			this.destroy();
		};

		img.load(this.getSource());        
        
    });
});
    
});