JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<script> var FileAPI = {
    staticPath: 'http://mailru.github.io/FileAPI/dist/',
    html5: !!1			,
    debug: !0
}; </script>
<script src="//mailru.github.io/FileAPI/dist/FileAPI.js"></script>
<script src="//mailru.github.io/FileAPI/plugins/FileAPI.exif.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.2.4/json3.min.js"></script>

<form style="padding: 10px;">
		<h3>Select image:</h3>
		<div class="btn js-fileapi-wrapper">
			<input name="file" type="file" accept="image/*"/>
		</div>

		<div id="preview" style="display: none;">

			<div class="col">
				<h4>Watermark position</h4>
				<div id="pos" style="font-size: 12px;">
				</div>

				<h4>Output result</h4>
				<div id="output">
					<label>
						<input value="image/jpeg" type="radio" name="type"/>
						image/jpeg
					</label>
					<label>
						<input value="image/png" type="radio" name="type"/>
						image/png
					</label>
					<br/>
					<br/>

					<input name="width" type="text" style="width: 50px; text-align: center"/> x
					<input name="height" type="text" style="width: 50px; text-align: center"/>
				</div>
			</div>

			<div class="col">
				<h4>Preview <span id="preview-processing" class="anim" style="display: none">(processing&hellip;)</span></h4>
				<div id="image"></div>
			</div>

			<div class="col" style="position: absolute; right: 10px;">
				<h4>Server response <span id="uploading" class="anim" style="display: none"></span></h4>
				<div id="server"></div>
			</div>
			<br clear="all"/>

			<div>
				<h4>EXIF</h4>
				<div id="exif"></div>
			</div>
		</div>
	</form>

CSS

body {
			font-size: 15px;
			font-family: "Helvetica Neue";
		}

		@keyframes color {
			from { color: #000; }
			to { color: #f60; }
		}

		@-moz-keyframes color {
			from { color: #000; }
			to { color: #f60; }
		}

		@-webkit-keyframes color {
			from { color: #000; }
			to { color: #f60; }
		}

		.anim {
			-webkit-animation: color 1s infinite;
			-moz-animation: color 1s infinite;
			animation: color 1s infinite;
		}

JavaScript

(function (){
			var elms = document.forms[0];
			var positions = ['<table>'];

			FileAPI.each(['TOP', 'CENTER', 'BOTTOM'], function (x, i){
				positions.push('<tr>');
				FileAPI.each(['LEFT', 'CENTER', 'RIGHT'], function (y, j){
					positions.push('<td><label><input type="radio" name="rel" value="'+ (i*3 + j) +'"/> '+x+'_'+y+'</label></td>');
				});
				positions.push('</tr>');
			});


			pos.innerHTML += positions.join('')+'</table>';


			function _updWatermark(evt){
				var file = FileAPI.getFiles(elms.file)[0];
				var rel =  (FileAPI.filter(elms.rel, function (rel){ return rel.checked; })[0] || {}).value;
				var type = (FileAPI.filter(elms.type, function (type){ return type.checked; })[0] || {}).value;
				var overlay = { x: 5, y: 5, src: 'http://mailru.github.io/FileAPI/statics/watermark.png', rel: rel };

				document.getElementById('preview-processing').style.display = '';

				// Create preview
				FileAPI.Image(file)
					.resize(300, 300, 'max')
					.overlay(overlay)
					.get(function (err, img){
						image.innerHTML = '';
						image.appendChild(img);
						document.getElementById('preview-processing').style.display = 'none';
					})
				;

				document.getElementById('uploading').style.display = '';

				// Upload
				FileAPI.upload({
					  url: '//rubaxa.org/FileAPI/server/ctrl.php'
					, files: elms.file
					, imageTransform: {
						  width: elms.width.value|0
						, height: elms.height.value|0
						, preview: true
						, type: type // Output type
						, overlay: overlay // Add watermark
					}
					, upload: function (){
						document.getElementById('uploading').innerHTML = '(uploading&hellip;)';
					}
					, progress: function (evt){
						document.getElementById('uploading').innerHTML = (evt.loaded/evt.total * 100).toFixed(2) +'%';
					}
					, complete: function (err, xhr){
						if( err ){
							alert('Oops, server error.');
						} else {
							var res = JSON.parse(xhr.responseText);

							FileAPI.each(res.images,...