add ui to upload to IPFS node on box
This commit is contained in:
John Hess
parent
99089126c0
commit
54b3da996c
27 changed files with 78892 additions and 4 deletions
201
upload.html
Normal file
201
upload.html
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
---
|
||||
layout: empty
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Upload files to IPFS from Browser</title>
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/upload/style.css?v0.1" type='text/css'>
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/upload/upload-utilities.css?v0.1" type='text/css'>
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/upload/node-menu.css?v0.1" type='text/css'>
|
||||
<script src='{{ site.baseurl }}/assets/js/upload/jquery.min.js?2.1.3'></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/upload/ipfs-http-client.js"></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/upload/buffer.js?5.2.1"></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/upload/config.js?v0.1"></script> <!-- read config.js before upload.js -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="b-nav">
|
||||
<nav>
|
||||
<a href="#" title="home">
|
||||
<h1>Upload files to <img src="{{ site.baseurl }}/assets/images/upload/ipfs.png" style="margin: 0 2px"></h1>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="content">
|
||||
<div id="wrapper">
|
||||
<div id="top">
|
||||
<p>This Butter Box is part of the Interplanetary File System (IPFS). You can always upload files to this box and see the files others have uploaded. Whenever the Butter Box is connected to the Internet, it'll make those files available to people everywhere.</p>
|
||||
<p>Remember, anyone will be able to see the files you upload here, so don't upload private things. </p>
|
||||
</div>
|
||||
<div id="hidden-menu">
|
||||
<div class="form">
|
||||
<script>
|
||||
var formRemote = `<div id="remote">
|
||||
<h1>Configure your IPFS Gateway Node as Remote</h1>
|
||||
<form action="submit" method="post">
|
||||
<div class="top-row">
|
||||
<div class="field-wrap" id="address">
|
||||
<label id="labelAddress">
|
||||
Node Address<span class="req">*</span>
|
||||
</label>
|
||||
<input type="text" name="addressNode" id="remote_address" required autocomplete="off" />
|
||||
</div>
|
||||
<div class="field-wrap" id="apiPort">
|
||||
<label id="labelPort">
|
||||
API Port<span class="req">*</span>
|
||||
</label>
|
||||
<input type="text" name="apiPort" id="remote_apiPort" required autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-row">
|
||||
<div class="field-wrap" id="gatewayPort">
|
||||
<label id="labelGateway">
|
||||
Gateway Port\
|
||||
</label>
|
||||
<input type="text" name="gatewayPort" id="remote_gatewayPort" required autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="tab-group" id="remoteProtocol">
|
||||
<li class="tab" id="https" onclick="changeProtocol('remote', 'https')"><a href="#remote">HTTPS</a></li>
|
||||
<li class="tab" id="http" onclick="changeProtocol('remote', 'http')"><a href="#remote">HTTP</a></li>
|
||||
</ul>
|
||||
<button type="button" class="button button-block" id="buttonRemote" onclick="updateNode('remote')">
|
||||
<div class="buttonContent">
|
||||
<div>Connect <img src="{{ site.base_url }}/assets/images/upload/connect.png" /></div>
|
||||
<div class="min-loading min-loading-hidden">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</form>
|
||||
</div>`;
|
||||
|
||||
var formLocal = `<div id="local">
|
||||
<h1>Configure your IPFS Gateway Node as Local</h1>
|
||||
<form action="submit" method="post">
|
||||
<div class="top-row">
|
||||
<div class="field-wrap" id="address">
|
||||
<label id="labelAddress">
|
||||
Node Address<span class="req">*</span>
|
||||
</label>
|
||||
<input type="text" name="first_name" id="local_address" required autocomplete="off" />
|
||||
</div>
|
||||
<div class="field-wrap" id="apiPort">
|
||||
<label id="labelPort">
|
||||
API Port<span class="req">*</span>
|
||||
</label>
|
||||
<input type="text" name="last_name" id="local_apiPort" required autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-row">
|
||||
<div class="field-wrap" id="gatewayPort">
|
||||
<label id="labelGateway">
|
||||
Gateway Port\
|
||||
</label>
|
||||
<input type="text" name="gatewayPort" id="local_gatewayPort" required autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
<ul class="tab-group" id="localProtocol">
|
||||
<li class="tab" id="https" onclick="changeProtocol('local', 'https')"><a href="#local">HTTPS</a></li>
|
||||
<li class="tab" id="http" onclick="changeProtocol('local', 'http')"><a href="#local">HTTP</a></li>
|
||||
</ul>
|
||||
<button type="button" class="button button-block" id="buttonLocal" onclick="updateNode('local')">
|
||||
<div class="buttonContent">
|
||||
<div>Connect <img src="{{ site.base_url }}/assets/images/upload/connect.png" /></div>
|
||||
<div class="min-loading min-loading-hidden">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</form>
|
||||
</div>`;
|
||||
|
||||
if (node.default == "remote") {
|
||||
document.querySelector("div.form").innerHTML = `<ul class="tab-group">
|
||||
<li class="tab active">
|
||||
<a href="#remote">Remote Node</a>
|
||||
</li>
|
||||
<li class="tab">
|
||||
<a href="#local">Local Node</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
${formRemote}\n${formLocal}
|
||||
</div><!-- tab-content -->`
|
||||
}
|
||||
|
||||
if (node.default == "local") {
|
||||
document.querySelector("div.form").innerHTML = `<ul class="tab-group">
|
||||
<li class="tab active">
|
||||
<a href="#local">Local Node</a>
|
||||
</li>
|
||||
<li class="tab">
|
||||
<a href="#remote">Remote Node</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
${formLocal}\n${formRemote}
|
||||
</div><!-- tab-content -->`
|
||||
}
|
||||
|
||||
</script>
|
||||
</div> <!-- /form -->
|
||||
</div>
|
||||
<div id="top">
|
||||
<div id="fileDropBox">
|
||||
<svg class="box_icon" xmlns="http://www.w3.org/2000/svg" width="50" height="43" viewBox="0 0 50 43">
|
||||
<path
|
||||
d="M48.4 26.5c-.9 0-1.7.7-1.7 1.7v11.6h-43.3v-11.6c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v13.2c0 .9.7 1.7 1.7 1.7h46.7c.9 0 1.7-.7 1.7-1.7v-13.2c0-1-.7-1.7-1.7-1.7zm-24.5 6.1c.3.3.8.5 1.2.5.4 0 .9-.2 1.2-.5l10-11.6c.7-.7.7-1.7 0-2.4s-1.7-.7-2.4 0l-7.1 8.3v-25.3c0-.9-.7-1.7-1.7-1.7s-1.7.7-1.7 1.7v25.3l-7.1-8.3c-.7-.7-1.7-.7-2.4 0s-.7 1.7 0 2.4l10 11.6z">
|
||||
</path>
|
||||
</svg>
|
||||
Drop files here <br> or
|
||||
<label for='files'>Choose Files »</label>
|
||||
<input type="file" name="files[]" id="files" class="box_file"
|
||||
data-multiple-caption="{count} files selected" multiple="">
|
||||
</div>
|
||||
<!-- Provides the alert() method. -->
|
||||
<div id="list">
|
||||
<ul></ul>
|
||||
</div>
|
||||
<div id="divResponse">
|
||||
<pre id="response">
|
||||
<spam id="info">Result:</spam>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="upload_conf">
|
||||
<button type="button" onclick="upload()" class="box_button" id="buttonUpload">Upload<img
|
||||
src="{{ site.baseurl }}/assets/images/upload/upload.png" /></button>
|
||||
<div class="min-loading blue loading-hidden">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="source-ack">
|
||||
<small><a href="https://github.com/anarkrypto/upload-files-to-ipfs-from-browser-panel">{% t upload_ui_source_ack %}</a></small>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script src="{{ site.baseurl }}/assets/js/upload/node-config.js?v0.1"></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/upload/connect-and-upload.js?v0.1"></script>
|
||||
<script src="{{ site.baseurl }}/assets/js/upload/node-menu.js"></script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue