Httprelay file sharing

by Jonas Jasas

HTML

<h1>Share local files directly from your browser</h1>
<h2><a href="https://httprelay.io/" target="_blank">HTTP Relay</a> proxy communication method</h2>

<p>
  Copy this link and paste it in to the new browser tab to see the result (or share this link with the other users):
  <div id="serverLink" href="" target="_blank">
    <span class="proxy-url" id ="proxyUrl"></span><span class="proxy-server" id="proxyServer"></span><span class="proxy-path" id ="proxyPath"></span>
  </div>
</p>

<details>
  <summary>URL legend</summary>
  <ul>
    <li class="proxy-url">URL of HTTP Relay proxy communication method</li>
    <li class="proxy-server">Server name</li>
    <li class="proxy-path">Path</li>
  </ul>
</details>

<p>
  <table id="serverSharedFiles">
    <tr>
      <th>Shared file name</th>  
      <th>Size</th>  
      <th></th>  
    </tr>
    <template id="serverFileTemplate">
      <tr class="file">
        <td class="fileName"></td>
        <td class="fileSize"></td>
        <td><button class="removeFile">X</button></td>
      </tr>
    </template>
  </table>
</p>

<p>
  <label for="fileInput">Add files to share</label>
  <input id="fileInput" type="file" multiple>
</p>




<!-- HTML Template to display shared files for the client ///////////////////////////////////////////////////////////////////////////-->
<template id="pageLayout">
	<h1>Download files shared with a browser</h1>
	<h2><a href="https://httprelay.io/" target="_blank">HTTP Relay</a> proxy communication method</h2>
      
	<table>
		<thead>
			<tr>
				<th>Shared file name</th>  
				<th>Size</th>  
			</tr>
		</thead>
		<tbody id="clientFiles"></tbody>
		<template id="clientFileTemplate">
			<tr class="file">
				<td><a class="fileName"></a></td>
				<td class="fileSize"></td>
			</tr>
		</template>
	</table>
</template>

CSS

.proxy-url {
  color: blue;
}

.proxy-server {
  color: green;
}

.proxy-path {
  color: red;
}

JavaScript

// Server side file managment //////////////////////////////////////////////////////////////////////////
document.getElementById('fileInput').addEventListener('change', e => {
  let fileFrag = document.getElementById('serverFileTemplate').content
  Array.from(e.currentTarget.files).forEach(f => {
    let fileEl = document.importNode(fileFrag, true).children[0]
    fileEl.id = Math.round(Math.random()*1000000)
    fileEl.file = f
    fileEl.getElementsByClassName('fileName')[0].textContent = f.name
    fileEl.getElementsByClassName('fileSize')[0].textContent = f.size
    fileEl.getElementsByClassName('removeFile')[0].addEventListener('click', () => fileEl.remove())    
    document.getElementById('serverSharedFiles').appendChild(fileEl)
  })
});


// File serving implementation /////////////////////////////////////////////////////////////////////////
import Httprelay from 'https://cdn.httprelay.io/httprelay-proxy-v1.js'
//import Httprelay from 'https://www-namai.jon.lt/httprelay-proxy-server.js'

// Generating unique server name
let serverName = getUniqueServerName('demo-file-share')

// Creating a server
let httprelay = new Httprelay(serverName)

// Registering handler for the path
httprelay.get('/', () => {
	let cliDoc = document.implementation.createHTMLDocument()
  cliDoc.body.innerHTML = document.getElementById('pageLayout').innerHTML
  let fileFrag = cliDoc.getElementById('clientFileTemplate').content
  
	Array.from(document.getElementsByClassName('file')).forEach(srvFileEl => {
		let cliFileEl = cliDoc.importNode(fileFrag, true).children[0]
		cliFileEl.getElementsByClassName('fileName')[0].setAttribute('href', `download/${srvFileEl.id}`)
		cliFileEl.getElementsByClassName('fileName')[0].textContent = srvFileEl.file.name
		cliFileEl.getElementsByClassName('fileSize')[0].textContent = srvFileEl.file.size
		cliDoc.getElementById('clientFiles').appendChild(cliFileEl)
	})

  return httprelay.documentResponse(cliDoc)
})

// Download path...