Image exchange example

HttpRelay.io multicast communication method example

by Jonas Jasas

HTML

<div class="container">
  <h1>Image exchange</h1>
  <h2><a href="https://httprelay.io">Httprelay.io</a> mcast example</h2>
  <label for="share-url">Share this link to exchange images:</label>
  <input type="text" id="share-url" size="50" readonly value="https://fiddle.jshell.net/jasajona/f2an7tjh/show/?chanid=">
  <p>
    <em>IMPORTANT!</em> demo.httprelay.io instance runs in extremely limited environment.
    In order to evaluate performance or use it in production please 
    <a href="https://gitlab.com/jonas.jasas/httprelay#installation" target="_blank">run your own instance</a>.
  </p>

  <input id="image-input" type="file" accept=".jpg, .png, .jpeg, .gif"/>
  <div class="images"></div>
</div>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.container {
   flex: 1 1 auto;
   max-width: 80vw;
   text-align: center;
}

.images > * {
  max-width: 80vw;
  display: block;
  margin-top: 1em;
}

JavaScript

var	chanId = 'img' + Math.round(Math.random()*1000)
try {
  query = new URLSearchParams(top.location.search)
	chanId = query.get('chanid')
} catch(e) {}

$('#share-url').val($('#share-url').val() + chanId)
var mcastUrl = 'https://demo.httprelay.io/mcast/' + chanId;

$('#image-input').on('change', e => {
  $.post({
    url: mcastUrl,
    data: $(e.currentTarget).prop('files')[0],
    contentType: false,
    processData: false
  })
})

function loadImage(url) {
	$('<img src="'+url+'?nocache=' + Math.round(Math.random()*100000) + '">')	// State is preserved using SeqId cookie set by image request
  	.prependTo($('.images'))
    .on('load error', () => loadImage(url));
}
loadImage(mcastUrl);