agazso/index.html

## index.html
<!-- https://gist.github.com/agazso/15b2245cfa1206ec34f60c782b96b2cf -->
<html>
	<head>
    <title>Swarm File Uploader</title>
    <script src="/files/192a6e12ffc8bd9a246103bcac2a6c7afac55bc9dd1eaf2cb37c0b6cad9be278"></script>
    <script>
      const url = window.location.origin
      const bee = new window['@ethersphere/bee-js'].default(url)

      function getIndexDocument(files) {
        if (files.length === 1) {
          return files[0].name
        }
        for (let i = 0; i < files.length; i++) {
          const file = files[i]
          if (file.name === 'index.html') {
            return file.name
          }
        }
      }

      function filePath(file)  {
        if (file.webkitRelativePath && file.webkitRelativePath !== '') {
          return file.webkitRelativePath.replace(/.*?\//i, '')
        }
        return file.name
      }

      function htmlFileList(files, linkBase) {
        let html = ''
        for (let i = 0; i < files.length; i++) {
          const path = filePath(files[i])
          const link = linkBase + '/' + path
          html += `<li><a href='${link}'>${path}</a></li>`
        }
        return html
      }

      function readFiles() {
        const files = document.getElementById('files').files
        uploadFiles(files)
      }

      function uploadFiles(files) {
        hide('#files')
        show('.spinner')
        if (!files.length) {
          alert('Please select a file!')
          return
        }
        const indexDocument = getIndexDocument(files)
        bee.uploadFiles(files, { indexDocument }).then(hash => {
          hide('.spinner')
          const link = bee.url + '/bzz/' + hash
          document.querySelector('#link').innerHTML = `<a href='${link}'>${link}</>`
          document.querySelector('#fileList').innerHTML = htmlFileList(files, link)
        })
      }

      function show(selector) {
        document.querySelector(selector).style.visibility = 'visible'
      }

      function hide(selector) {
        document.querySelector(selector).style.visibility = 'hidden'
      }

      window.ondrop = function(event) {
        event.preventDefault()
        if (event.dataTransfer.files) {
          uploadFiles(event.dataTransfer.files)
        }
      }

      window.ondragover = function(event) {
        event.preventDefault()
        event.dataTransfer.dropEffect = 'move'
      }

      window.onload = function(event) {
        document.querySelector('#files').onchange = function (event) {
          readFiles()
        }
      }
    </script>
    <style>
      .spinner {
        display: inline-block;
        width: 80px;
        height: 80px;
        visibility: hidden;
      }
      .spinner:after {
        content: " ";
        display: block;
        width: 64px;
        height: 64px;
        margin: 8px;
        border-radius: 50%;
        border: 6px solid black;
        border-color: black transparent black transparent;
        animation: lds-dual-ring 1.2s linear infinite;
      }
      @keyframes lds-dual-ring {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
	<body>
    <div id="link">
      <h1>Swarm File Uploader</h1>
      <p>
        You can select multiple files or directories to upload.
        You can also drop files here (but not directories).
      </p>
      <input type="file" id="files" name="file" webkitdirectory multiple/>
      <div class="spinner"></div>
    </div>
    <ul id="fileList"></ul>
	</body>
</html>
	<!-- https://gist.github.com/agazso/15b2245cfa1206ec34f60c782b96b2cf -->
	<html>
	<head>
	<title>Swarm File Uploader</title>
	<script src="/files/192a6e12ffc8bd9a246103bcac2a6c7afac55bc9dd1eaf2cb37c0b6cad9be278"></script>
	<script>
	const url = window.location.origin
	const bee = new window['@ethersphere/bee-js'].default(url)

	function getIndexDocument(files) {
	if (files.length === 1) {
	return files[0].name
	}
	for (let i = 0; i < files.length; i++) {
	const file = files[i]
	if (file.name === 'index.html') {
	return file.name
	}
	}
	}

	function filePath(file) {
	if (file.webkitRelativePath && file.webkitRelativePath !== '') {
	return file.webkitRelativePath.replace(/.*?\//i, '')
	}
	return file.name
	}

	function htmlFileList(files, linkBase) {
	let html = ''
	for (let i = 0; i < files.length; i++) {
	const path = filePath(files[i])
	const link = linkBase + '/' + path
	html += `<li><a href='${link}'>${path}</a></li>`
	}
	return html
	}

	function readFiles() {
	const files = document.getElementById('files').files
	uploadFiles(files)
	}

	function uploadFiles(files) {
	hide('#files')
	show('.spinner')
	if (!files.length) {
	alert('Please select a file!')
	return
	}
	const indexDocument = getIndexDocument(files)
	bee.uploadFiles(files, { indexDocument }).then(hash => {
	hide('.spinner')
	const link = bee.url + '/bzz/' + hash
	document.querySelector('#link').innerHTML = `<a href='${link}'>${link}</>`
	document.querySelector('#fileList').innerHTML = htmlFileList(files, link)
	})
	}

	function show(selector) {
	document.querySelector(selector).style.visibility = 'visible'
	}

	function hide(selector) {
	document.querySelector(selector).style.visibility = 'hidden'
	}

	window.ondrop = function(event) {
	event.preventDefault()
	if (event.dataTransfer.files) {
	uploadFiles(event.dataTransfer.files)
	}
	}

	window.ondragover = function(event) {
	event.preventDefault()
	event.dataTransfer.dropEffect = 'move'
	}

	window.onload = function(event) {
	document.querySelector('#files').onchange = function (event) {
	readFiles()
	}
	}
	</script>
	<style>
	.spinner {
	display: inline-block;
	width: 80px;
	height: 80px;
	visibility: hidden;
	}
	.spinner:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid black;
	border-color: black transparent black transparent;
	animation: lds-dual-ring 1.2s linear infinite;
	}
	@keyframes lds-dual-ring {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	}
	}
	</style>
	</head>
	<body>
	<div id="link">
	<h1>Swarm File Uploader</h1>
	<p>
	You can select multiple files or directories to upload.
	You can also drop files here (but not directories).
	</p>
	<input type="file" id="files" name="file" webkitdirectory multiple/>
	<div class="spinner"></div>
	</div>
	<ul id="fileList"></ul>
	</body>
	</html>