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
213
assets/css/upload/node-menu.css
Normal file
213
assets/css/upload/node-menu.css
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
.form {
|
||||
background: rgba(35, 61, 77, 0.81);
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
|
||||
}
|
||||
|
||||
.tab-group {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.tab-group:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.tab-group li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
background: rgba(160, 179, 176, 0.25);
|
||||
color: #a0b3b0;
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
-webkit-transition: .5s ease;
|
||||
transition: .5s ease;
|
||||
}
|
||||
|
||||
#localProtocol li,
|
||||
#remoteProtocol li {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
#localProtocol li a,
|
||||
#remoteProtocol li a {
|
||||
width: 28%;
|
||||
padding: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tab-group li a:hover {
|
||||
background: #207ab6;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-group .active a {
|
||||
background: #3498db;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.tab-content > div:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form h1 {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-weight: 300;
|
||||
margin-bottom: 10px;
|
||||
padding: 0px 0px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.form label {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
transition: all 0.25s ease;
|
||||
pointer-events: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
label .req {
|
||||
margin: 2px;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
label.active {
|
||||
-webkit-transform: translateY(30px);
|
||||
transform: translateY(30px);
|
||||
left: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
label.active .req {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
label.highlight {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5px 10px;
|
||||
background: none;
|
||||
background-image: none;
|
||||
border: 1px solid #a0b3b0;
|
||||
color: #ffffff;
|
||||
border-radius: 0;
|
||||
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
|
||||
transition: border-color .25s ease, box-shadow .25s ease;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: 0;
|
||||
border-color: #207ab6;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: 2px solid #a0b3b0;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.field-wrap {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.top-row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.top-row > div {
|
||||
margin-right: 4%;
|
||||
}
|
||||
|
||||
#address {
|
||||
float: left;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
#apiPort {
|
||||
float: right;
|
||||
width: 26%;
|
||||
}
|
||||
|
||||
#gatewayPort {
|
||||
float: right;
|
||||
width: 26%;
|
||||
}
|
||||
|
||||
.top-row > div:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 0;
|
||||
outline: none;
|
||||
border-radius: 0;
|
||||
padding: 6px 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
background: #3498db;
|
||||
color: #ffffff;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.button:hover,
|
||||
.button:focus {
|
||||
background: #207ab6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-block {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-block > div:first-child {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-block img {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.min-line {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #0c89ba;
|
||||
}
|
||||
|
||||
.min-loading-hidden {
|
||||
display: none;
|
||||
}
|
||||
333
assets/css/upload/style.css
Normal file
333
assets/css/upload/style.css
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
html, body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
|
||||
background-color: #e9ebee;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin: 15px auto;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
align-items: center;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background-color: white;
|
||||
padding: 50px 0px 50px 0px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#hidden-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#top {
|
||||
width: 100%;
|
||||
margin: 25px 50px;
|
||||
}
|
||||
|
||||
#left {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#right {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-transform: uppercase;
|
||||
color: #555555;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav img {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
display: inline-block;
|
||||
padding: 25px 1.2em;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #92b0b3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
nav a:hover > * {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
nav .svg {
|
||||
fill: #92b0b3;
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
nav ul ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%; /*sets the top edge of the element above/below top edge of nearest ancestor*/
|
||||
}
|
||||
|
||||
nav ul li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul ul li {
|
||||
float: none;
|
||||
background: rgba(35, 61, 77, 0.81);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav ul ul li a {
|
||||
color: #92b0b3;
|
||||
}
|
||||
|
||||
nav ul ul li a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 860px) {
|
||||
nav h1 {
|
||||
margin-top: 25px;
|
||||
}
|
||||
pre#response {
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 477px) {
|
||||
nav h1 {
|
||||
font-size: 14px;
|
||||
}
|
||||
nav ul {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 410px) {
|
||||
nav h1 {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
padding: 0 .5em 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 390px) {
|
||||
#wrapper {
|
||||
padding: 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 370px) {
|
||||
nav h1 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
nav img {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 355px) {
|
||||
nav h1 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
nav img {
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 350px) {
|
||||
nav h1 {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
nav img {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #92b0b3;
|
||||
font-weight: 500;
|
||||
font-size: 1.2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.buttonContent > div:first-child {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.buttonContent > div:first-child img {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.min-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.min-loading.blue {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
.min-loading div {
|
||||
position: absolute;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
||||
}
|
||||
|
||||
.min-loading.blue div {
|
||||
background-color: #3498db;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.min-loading div:nth-child(1) {
|
||||
left: 6px;
|
||||
animation: min-loading1 0.6s infinite;
|
||||
}
|
||||
.min-loading div:nth-child(2) {
|
||||
left: 6px;
|
||||
animation: min-loading2 0.6s infinite;
|
||||
}
|
||||
.min-loading div:nth-child(3) {
|
||||
left: 26px;
|
||||
animation: min-loading2 0.6s infinite;
|
||||
}
|
||||
.min-loading div:nth-child(4) {
|
||||
left: 45px;
|
||||
animation: min-loading3 0.6s infinite;
|
||||
}
|
||||
@keyframes min-loading1 {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes min-loading3 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
@keyframes min-loading2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(19px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#divResponse {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#divResponse pre {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #333;
|
||||
min-height: 80px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
padding: 7px;
|
||||
font-size: 12px;
|
||||
overflow: auto;
|
||||
margin: 30px 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.b-nav {
|
||||
margin: 0px auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(35, 61, 77, 0.81);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
#source-ack
|
||||
{
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
138
assets/css/upload/upload-utilities.css
Normal file
138
assets/css/upload/upload-utilities.css
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
#fileDropBox {
|
||||
line-height: 5em;
|
||||
text-align: center;
|
||||
border-radius: 7px;
|
||||
color: #0f3c4b;
|
||||
background-color: #e5edf1;
|
||||
outline: 1px dashed gray;
|
||||
outline-offset: -6px;
|
||||
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
|
||||
padding: 25px 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box_icon {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
fill: #92b0b3;
|
||||
}
|
||||
|
||||
.box_file {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#fileDropBox label {
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#fileDropBox label:hover,
|
||||
#fileDropBox label:focus {
|
||||
background: #207ab6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='file'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fileDropBox label {
|
||||
background-color: #3498db;
|
||||
color: #fff;
|
||||
margin: 10px;
|
||||
padding: 6px 20px;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
border-radius: .2em;
|
||||
}
|
||||
|
||||
.box_button {
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
font-size: 1rem;
|
||||
width: 9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .1em;
|
||||
background-color: #3498db;
|
||||
color: #ffffff;
|
||||
transition: all 0.5s ease;
|
||||
-webkit-appearance: none;
|
||||
box-shadow: 0 2px 5px 2px rgba(19, 35, 47, 0.3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.box_button img {
|
||||
margin-bottom: -2px;
|
||||
margin-left: 2px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
#upload_conf {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.box_button:hover,
|
||||
.box_button:focus {
|
||||
background: #207ab6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#list {
|
||||
max-height: 400px;
|
||||
min-height: 100px;
|
||||
border: 1px solid #ccc;
|
||||
margin-top: 30px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#list ul {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
list-style-type: none;
|
||||
color: #687b9d;
|
||||
}
|
||||
|
||||
#list li {
|
||||
margin-top: 3px;
|
||||
background-color: #f2f3f5;
|
||||
border: 1px solid #dbdbdb;
|
||||
padding: 5px 0px 6px 8px;
|
||||
word-wrap: break-word;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#list .uploaded {
|
||||
text-decoration: none;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
#list .uploaded:hover {
|
||||
color: #207ab6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.removeItem {
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.removeItem:hover {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
spam#fileProperties {
|
||||
color: #687b9d;
|
||||
}
|
||||
|
||||
spam#info {
|
||||
color: #92b0b3;
|
||||
}
|
||||
BIN
assets/images/btr-ipfs.png
Normal file
BIN
assets/images/btr-ipfs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
assets/images/upload/connect.png
Normal file
BIN
assets/images/upload/connect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/images/upload/connected.png
Normal file
BIN
assets/images/upload/connected.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 914 B |
BIN
assets/images/upload/disconnected.png
Normal file
BIN
assets/images/upload/disconnected.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/images/upload/ipfs.png
Normal file
BIN
assets/images/upload/ipfs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
assets/images/upload/link.png
Normal file
BIN
assets/images/upload/link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
assets/images/upload/reset.png
Normal file
BIN
assets/images/upload/reset.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
assets/images/upload/upload.png
Normal file
BIN
assets/images/upload/upload.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
2
assets/js/upload/buffer.js
Normal file
2
assets/js/upload/buffer.js
Normal file
File diff suppressed because one or more lines are too long
24
assets/js/upload/config.js
Normal file
24
assets/js/upload/config.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
// Change this file as you need it
|
||||
|
||||
const config = {
|
||||
port: 5001,
|
||||
gateway: 8080
|
||||
}
|
||||
|
||||
const node = {
|
||||
default: 'local',
|
||||
remote: {
|
||||
address: 'ipfs.sea.tube',
|
||||
...config,
|
||||
protocol: 'https'
|
||||
},
|
||||
|
||||
// default local node
|
||||
// $butter_name is replaced with the butterbox's address during provisioning
|
||||
// see https://gitlab.com/likebutter/butterbox-rpi
|
||||
local: {
|
||||
address: window.location.hostname,
|
||||
...config,
|
||||
protocol: 'http'
|
||||
}
|
||||
}
|
||||
256
assets/js/upload/connect-and-upload.js
Normal file
256
assets/js/upload/connect-and-upload.js
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
function updateNode (selectedNode) {
|
||||
if (selectedNode == "remote") {
|
||||
node.default = "remote";
|
||||
node.remote.address = document.querySelector("#remote_address").value
|
||||
node.remote.port = document.querySelector("#remote_apiPort").value
|
||||
node.remote.gateway = document.querySelector("#remote").querySelector("#remote_gatewayPort").value
|
||||
node.remote.protocol = document.querySelector("#remoteProtocol").querySelector("li.active").innerText.toLowerCase()
|
||||
}
|
||||
|
||||
if (selectedNode == "local") {
|
||||
node.default = "local";
|
||||
node.local.address = document.querySelector("#local_address").value
|
||||
node.local.port = document.querySelector("#local_apiPort").value
|
||||
node.local.gateway = document.querySelector("#local").querySelector("#local_gatewayPort").value
|
||||
node.local.protocol = document.querySelector("#localProtocol").querySelector("li.active").innerText.toLowerCase()
|
||||
}
|
||||
|
||||
nodeConnect(selectedNode);
|
||||
}
|
||||
|
||||
|
||||
function nodeConnect (selectedNode) {
|
||||
if (selectedNode == "remote") {
|
||||
document.querySelector('button#buttonRemote').setAttribute('disabled', '')
|
||||
document.querySelector('button#buttonRemote').querySelector(".buttonContent div").innerText = "Connecting"
|
||||
document.querySelector('button#buttonRemote').querySelector(".buttonContent div").classList.add("connecting")
|
||||
document.querySelector('button#buttonLocal').querySelector(".buttonContent div").innerHTML = 'Connect <img src="/assets/images/upload/connect.png"/>'
|
||||
document.querySelector('button#buttonRemote').querySelector(".buttonContent .min-loading").classList.remove('min-loading-hidden') //loading event
|
||||
}
|
||||
|
||||
if (selectedNode == "local") {
|
||||
document.querySelector('button#buttonLocal').setAttribute('disabled', '')
|
||||
document.querySelector('button#buttonLocal').querySelector(".buttonContent div").innerText = "Connecting"
|
||||
document.querySelector('button#buttonLocal').querySelector(".buttonContent div").classList.add("connecting")
|
||||
document.querySelector('button#buttonRemote').querySelector(".buttonContent div").innerHTML = 'Connect <img src="/assets/images/upload/connect.png"/>'
|
||||
document.querySelector('button#buttonLocal').querySelector(".buttonContent .min-loading").classList.remove('min-loading-hidden') //loading event
|
||||
}
|
||||
|
||||
var status = "wait"
|
||||
|
||||
ipfsRequest ("GatewayCheck.log", buffer.Buffer.from('ABC', 'utf-8')).then((data) => {
|
||||
if (data[0].hash == "QmNz1UBzpdd4HfZ3qir3aPiRdX5a93XwTuDNyXRc6PKhWW" ) {
|
||||
online(selectedNode);
|
||||
status = "online"
|
||||
} else {
|
||||
offline(selectedNode);
|
||||
status = "offline"
|
||||
}
|
||||
document.querySelector('button#buttonRemote').removeAttribute("disabled");
|
||||
document.querySelector('button#buttonLocal').removeAttribute("disabled");
|
||||
document.querySelector('button#buttonRemote').querySelector('.buttonContent .min-loading').classList.add('min-loading-hidden') //loading event
|
||||
document.querySelector('button#buttonLocal').querySelector('.buttonContent .min-loading').classList.add('min-loading-hidden') //loading event
|
||||
return status
|
||||
}, function (reason) {
|
||||
document.querySelector('button#buttonRemote').removeAttribute("disabled");
|
||||
document.querySelector('button#buttonLocal').removeAttribute("disabled");
|
||||
document.querySelector('button#buttonRemote').querySelector('.buttonContent .min-loading').classList.add('min-loading-hidden') //loading event
|
||||
document.querySelector('button#buttonLocal').querySelector('.buttonContent .min-loading').classList.add('min-loading-hidden') //loading event
|
||||
offline(selectedNode)
|
||||
return "offline"
|
||||
})
|
||||
}
|
||||
|
||||
function online (selectedNode) {
|
||||
connected = 1
|
||||
if (selectedNode == "remote") {
|
||||
document.querySelector('button#buttonRemote').querySelector(".buttonContent div").classList.remove("connecting")
|
||||
document.querySelector('button#buttonRemote').querySelector(".buttonContent div").innerHTML = 'Node Online <img src="/assets/images/upload/connected.png"/>'
|
||||
document.querySelector('button#buttonRemote').querySelector('.buttonContent .min-loading').classList.add('min-loading-hidden')
|
||||
}
|
||||
if (selectedNode == "local") {
|
||||
document.querySelector('button#buttonLocal').querySelector(".buttonContent div").classList.remove("connecting")
|
||||
document.querySelector('button#buttonLocal').querySelector(".buttonContent div").innerHTML = 'Node Online <img src="/assets/images/upload/connected.png"/>'
|
||||
document.querySelector('button#buttonLocal').querySelector('.buttonContent .min-loading').classList.add('min-loading-hidden')
|
||||
}
|
||||
}
|
||||
|
||||
function offline (selectedNode) {
|
||||
connected = 0
|
||||
if (selectedNode == "remote") {
|
||||
document.querySelector('button#buttonRemote').querySelector(".buttonContent div").innerHTML = 'Node Offline! <img src="/assets/images/upload/disconnected.png"/>'
|
||||
}
|
||||
if (selectedNode == "local") {
|
||||
document.querySelector('button#buttonLocal').querySelector(".buttonContent div").innerHTML = 'Node Offline! <img src="/assets/images/upload/disconnected.png"/>'
|
||||
}
|
||||
}
|
||||
|
||||
function upload() {
|
||||
if (!connected) {
|
||||
alert ("Unable to connect to Butter Box's IPFS Node.")
|
||||
return
|
||||
}
|
||||
if (filesOk.length < 1) {
|
||||
alert("<p>At least one selected file is invalid - do not select any folders.</p><p>Please reselect and try again.</p>");
|
||||
return
|
||||
}
|
||||
document.querySelector('.min-loading.blue').classList.remove('loading-hidden') //loading event
|
||||
document.querySelector('button#buttonUpload').setAttribute('disabled', '')
|
||||
document.querySelector('button#buttonRemote').setAttribute('disabled', '')
|
||||
document.querySelector('button#buttonLocal').setAttribute('disabled', '')
|
||||
|
||||
filesOk.forEach(function(file){
|
||||
let reader = new FileReader();
|
||||
reader.readAsArrayBuffer(file);
|
||||
reader.onloadend = function() {
|
||||
ipfsRequest (file.name, buffer.Buffer(reader.result)).then((data) => {
|
||||
response.push(data[0])
|
||||
document.querySelector("#response").innerText = JSON.stringify(response, null, 2)
|
||||
updateList(fileChecksum(file), data[0].hash)
|
||||
uploadCount++
|
||||
if (uploadCount == filesOk.length) {
|
||||
document.querySelector('.min-loading.blue').classList.add('loading-hidden'); //stop loading event
|
||||
document.querySelector('button#buttonRemote').removeAttribute('disabled', '')
|
||||
document.querySelector('button#buttonLocal').removeAttribute('disabled', '')
|
||||
document.querySelector('button#buttonUpload').onclick=function(){resetFiles()}
|
||||
document.querySelector('button#buttonUpload').innerHTML = 'Clean Up<img src="/assets/images/upload/reset.png" />'
|
||||
document.querySelector('button#buttonUpload').removeAttribute("disabled");
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function ipfsRequest (file_name, data) {
|
||||
var ipfs = window.IpfsHttpClient(node[node.default].address, node[node.default].port, {protocol: node[node.default].protocol}) //router to the IPFS network without any local node
|
||||
var file_send =
|
||||
[
|
||||
{
|
||||
path: file_name,
|
||||
content: data
|
||||
}
|
||||
]
|
||||
return new Promise((resolve, reject) => {
|
||||
ipfs.add(file_send, function (err, json) {
|
||||
if (err) {
|
||||
alert(err);
|
||||
reject (0)
|
||||
} else {
|
||||
resolve (json)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function removeItem(checksum) {
|
||||
var item = files_checksum.indexOf(checksum)
|
||||
filesOk.splice(item, 1)
|
||||
files_checksum.splice(item, 1)
|
||||
|
||||
document.getElementById(checksum).remove();
|
||||
}
|
||||
|
||||
function handleDragOver(evt) {
|
||||
evt.stopPropagation(); // Do not allow the dragover event to bubble.
|
||||
evt.preventDefault(); // Prevent default dragover event behavior.
|
||||
} // handleDragOver
|
||||
|
||||
|
||||
function handleFileSelect(evt) {
|
||||
evt.stopPropagation(); // Do not allow the drop event to bubble.
|
||||
evt.preventDefault(); // Prevent default drop event behavior.
|
||||
|
||||
if (evt.dataTransfer != null){
|
||||
var files = evt.dataTransfer.files; // Grab the list of files dragged to the drop box.
|
||||
} else {
|
||||
var files = evt.target.files; // FileList object from input
|
||||
}
|
||||
|
||||
|
||||
if (!files) {
|
||||
alert("<p>At least one selected file is invalid - do not select any folders.</p><p>Please reselect and try again.</p>");
|
||||
return;
|
||||
}
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
if (!files[i]) {
|
||||
alert("Unable to access " + file.name);
|
||||
continue; // Immediately move to the next file object.
|
||||
}
|
||||
if (files[i].size == 0) {
|
||||
alert("Skipping " + files[i].name.toUpperCase() + " because it is empty.");
|
||||
continue;
|
||||
}
|
||||
if (files_checksum.includes(fileChecksum(files[i]))) {
|
||||
alert("This files is already listed");
|
||||
continue
|
||||
} else {
|
||||
files_checksum[filesOk.length] = fileChecksum(files[i])
|
||||
document.querySelector("#list").querySelector("ul").innerHTML += '<li id="' + fileChecksum(files[i]) + '"><strong class="fileName">' +
|
||||
files[i].name + '</strong> <spam class="itemClose"><a class="removeItem" href="#" onclick="removeItem(\''+fileChecksum(files[i])+'\')">×</a></spam>' +
|
||||
'</a></spam><br> <spam id="fileProperties"> (' + (files[i].type || 'n/a' ) +') - ' +
|
||||
files[i].size + ' bytes, last modified: ' + new Date(files[i].lastModified).toLocaleDateString() +'</spam></li>';
|
||||
|
||||
filesOk[filesOk.length] = files[i]; //push valid files for filesOk array
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//reset filesList input
|
||||
document.getElementById("files").value = ''
|
||||
if(!/safari/i.test(navigator.userAgent)){
|
||||
document.getElementById("files").type = ''
|
||||
document.getElementById("files").type = 'file'
|
||||
}
|
||||
}
|
||||
|
||||
function updateList (checksum, ipfsHash) {
|
||||
var i = files_checksum.indexOf(checksum) // equal filesOk[i]
|
||||
if (node[node.default].gateway == 80 || node[node.default].protocol == "https"){
|
||||
var gatewayPort = ''
|
||||
} else {
|
||||
var gatewayPort = node[node.default].gateway
|
||||
}
|
||||
document.getElementById(checksum).innerHTML = '<strong class="fileName"><a href="' + node[node.default].protocol + '://' + node[node.default].address + ':' + gatewayPort + '/ipfs/' + ipfsHash + '" class="uploaded" target="_blank">' + filesOk[i].name + ' <img src="/assets/images/upload/link.png" width="12px"/></a></strong>' +
|
||||
'</a></spam><br> <spam id="fileProperties"> (' + (filesOk[i].type || 'n/a' ) +') - ' + filesOk[i].size + ' bytes, last modified: ' + new Date(filesOk[i].lastModified).toLocaleDateString() +'</spam>'
|
||||
}
|
||||
|
||||
function fileChecksum(file) {
|
||||
var MD5 = function(d){result = M(V(Y(X(d),8*d.length)));return result.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function V(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){var h=m,t=f,g=r,e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){var m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}
|
||||
|
||||
var checksum = MD5(file.name + file.size + file.lastModified)
|
||||
return checksum
|
||||
}
|
||||
|
||||
function resetFiles() {
|
||||
filesOk = []
|
||||
files_checksum = []
|
||||
response = []
|
||||
uploadCount = 0
|
||||
document.querySelector("#list").querySelector("ul").innerHTML = ""
|
||||
document.querySelector("pre#response").innerHTML = '<spam id="info">Response IPFS API:</spam>'
|
||||
document.querySelector('button#buttonUpload').onclick = function(){upload()}
|
||||
document.querySelector('button#buttonUpload').innerHTML = 'Upload<img src="/assets/images/upload/upload.png">'
|
||||
}
|
||||
|
||||
|
||||
var filesOk = []
|
||||
var response = []
|
||||
var message = []
|
||||
var files_checksum = []
|
||||
var selectedNode = ""
|
||||
var uploadCount = 0
|
||||
var connected = 0
|
||||
if (!window.FileReader) {
|
||||
message = '<p>The ' +
|
||||
'<a href="http://dev.w3.org/2006/webapi/FileAPI/" target="_blank">File API</a>s ' +
|
||||
'are not fully supported by this browser.</p>' +
|
||||
'<p>Upgrade your browser to the latest version.</p>';
|
||||
document.querySelector('body').innerHTML = message;
|
||||
} else {
|
||||
// Set up the file drag and drop listeners:
|
||||
document.getElementById('fileDropBox').addEventListener('dragover', handleDragOver, false);
|
||||
document.getElementById('fileDropBox').addEventListener('drop', handleFileSelect, false);
|
||||
document.getElementById('files').addEventListener('change', handleFileSelect, false);
|
||||
}
|
||||
updateNode(node.default)
|
||||
77569
assets/js/upload/ipfs-http-client.js
Normal file
77569
assets/js/upload/ipfs-http-client.js
Normal file
File diff suppressed because one or more lines are too long
5
assets/js/upload/jquery.min.js
vendored
Normal file
5
assets/js/upload/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
43
assets/js/upload/node-config.js
Normal file
43
assets/js/upload/node-config.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
//set default remote Node
|
||||
document.getElementById("remote_address").value = node.remote.address;
|
||||
document.getElementById("remote_apiPort").value = node.remote.port;
|
||||
document.getElementById("remote_gatewayPort").value = node.remote.gateway;
|
||||
document.querySelector("#remote").querySelector("#labelAddress").className = "active"
|
||||
document.querySelector("#remote").querySelector("#labelPort").className = "active"
|
||||
document.querySelector("#remote").querySelector("#labelGateway").className = "active"
|
||||
if (node.remote.protocol.toLowerCase() == "https" || node.remote.protocol.toLowerCase() == "http") {
|
||||
changeProtocol("remote", node.remote.protocol.toLowerCase())
|
||||
} else {
|
||||
alert ("Configurations Invalid: Protocols accepted are HTTP or HTTPS only! Edit your config.js")
|
||||
throw new Error();
|
||||
}
|
||||
|
||||
//set default local node
|
||||
document.querySelector("#local_address").value = node.local.address;
|
||||
document.querySelector("#local_apiPort").value = node.local.port;
|
||||
document.getElementById("local_gatewayPort").value = node.local.gateway;
|
||||
document.querySelector("#local").querySelector("#labelAddress").className = "active"
|
||||
document.querySelector("#local").querySelector("#labelPort").className = "active"
|
||||
document.querySelector("#local").querySelector("#labelGateway").className = "active"
|
||||
if (node.local.protocol.toLowerCase() == "https" || node.local.protocol.toLowerCase() == "http") {
|
||||
changeProtocol("local", node.local.protocol.toLowerCase())
|
||||
} else {
|
||||
alert ("Configurations Invalid: Protocols accept are HTTP or HTTPS only! Edit your config.js")
|
||||
throw new Error();
|
||||
}
|
||||
|
||||
|
||||
function changeProtocol (selectedNode, protocol) {
|
||||
if (protocol == "https") {
|
||||
node[selectedNode].protocol = "https"
|
||||
document.querySelector("#"+selectedNode).querySelector("#http").className = "tab"
|
||||
document.querySelector("#"+selectedNode).querySelector("#https").className += " active"
|
||||
document.querySelector("input#remote_apiPort").value = 443;
|
||||
document.querySelector("input#remote_apiPort").disabled = true;
|
||||
}
|
||||
if (protocol == "http") {
|
||||
node[selectedNode].protocol = "http"
|
||||
document.querySelector("#"+selectedNode).querySelector("#https").className = "tab"
|
||||
document.querySelector("#"+selectedNode).querySelector("#http").className += " active"
|
||||
}
|
||||
}
|
||||
43
assets/js/upload/node-menu.js
Normal file
43
assets/js/upload/node-menu.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
|
||||
|
||||
var $this = $(this),
|
||||
label = $this.prev('label');
|
||||
|
||||
if (e.type === 'keyup') {
|
||||
if ($this.val() === '') {
|
||||
label.removeClass('active highlight');
|
||||
} else {
|
||||
label.addClass('active highlight');
|
||||
}
|
||||
} else if (e.type === 'blur') {
|
||||
if( $this.val() === '' ) {
|
||||
label.removeClass('active highlight');
|
||||
} else {
|
||||
label.removeClass('highlight');
|
||||
}
|
||||
} else if (e.type === 'focus') {
|
||||
|
||||
if( $this.val() === '' ) {
|
||||
label.removeClass('highlight');
|
||||
}
|
||||
else if( $this.val() !== '' ) {
|
||||
label.addClass('highlight');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('.tab a').on('click', function (e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
$(this).parent().addClass('active');
|
||||
$(this).parent().siblings().removeClass('active');
|
||||
|
||||
target = $(this).attr('href');
|
||||
|
||||
$('.tab-content > div').not(target).hide();
|
||||
|
||||
$(target).fadeIn(600);
|
||||
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue