Untitled

<link rel='icon' href='data:;base64,=' />
<script src='http://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
function attach() {
$('#up').on('click',function() {
var f=$('#upfile')[0].files[0];
$.ajax('/upload',
 {
 method:'POST',
 data:f,
 contentType:false,
 processData:false,
 statusCode: {201:function(){$('#status').text(f.name+': Success!');setTimeout(r,1000);}}
 });
});
$('#c').on('click',function() {
var f=$('#comment')[0].value;
var fl=$('#view')[0].contentWindow.location.pathname;
$.ajax(fl, {
 method:'PUT',
 contentType:"text/plain",
 data:f,
 statusCode: {201:function(){setTimeout(r,1000);}}
 });
});
$('#view').on('load',function() {
 console.log('view:load');
 var l=$('#view')[0].contentWindow.location.pathname;
 var lc="/?c="+l.slice(1);
 $.get(lc).done((data)=>{$('pre').text(data);$('pre').css({"display":"none"});});
});
$('#vfocus').on('mouseenter',()=>$('pre').css("display","block"))
 .on('mouseleave',()=>$('pre').css("display","none"));
}
function r() {window.location.reload(false);}
</script>
<style>p{font-family:sans-serif;font-size:small;width:50%;}
div#upload{width:50%;margin:2.5%;border:1px solid black;padding:0.5%;}
div#images{width:100%;height:auto;}
img{max-width:300px;max-height:300px;padding:0.5%;}
iframe{float:right;width:50%;height:70%;margin:0% 0.5%;border:none;}
footer{float:right;width:50%;padding:0.5%;}
</style>
<body onload='attach();'>
<div id='upload'><input type='file' id='upfile' /> <input id='up' type='button' value='Senden' />
<p id='status'>Upload an image/video file.</p><noscript><em>But first enable JavaScript!</em></noscript></div>
<p>Received images:</p><br/>
<a id='vfocus'><iframe src='about:blank' id='view' name='view'></iframe>
<footer><input style='border:1px solid grey;' type='text' id='comment' /><input id='c' type='button' value='OK' /><pre></pre></footer></a>
</body>