Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
Dexaran authored Jul 21, 2023
1 parent f460f03 commit f8ffe2e
Show file tree
Hide file tree
Showing 23 changed files with 80,230 additions and 58 deletions.
2 changes: 1 addition & 1 deletion ipfs/LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2022 Dexaran
Copyright (c) 2019 Anarkrypto

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
81 changes: 24 additions & 57 deletions ipfs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,82 +5,49 @@
</h1>


<h3>Introdução</h3>
### Introduction

Suba seus arquivos para a IPFS diretamente pelo Browser.
Você pode escolher entre usar um node IPFS rodando localmente ou remotamente, portanto instalar um node IPFS é opcional.
Upload your files to IPFS directly from the Browser using local or remote IPFS nodes.

Uma interface web simples e intituiva para a API [js-ipfs-http-client](https://github.com/ipfs/js-ipfs-http-client)
A simple and intuitive web interface for the API [js-ipfs-http-client](https://github.com/ipfs/js-ipfs-http-client)

As linguagens utilizadas aqui (javascript, html e css) se aplicam a qualquer servidor web, podem rodar tanto com node js, conforme segue o tutorial abaixo, como em outros.
Para rodar no apache e nginx, por exemplo, basta copiar os arquivos de dentro do diretório
[<strong>/public</strong>](https://github.com/anarkrypto/upload-files-to-ipfs-from-browser-panel/tree/master/public") para o diretório do seu servidor (por exemplo /var/www/html/).
[<h3>Demo Online</h3>](https://anarkrypto.github.io/upload-files-to-ipfs-from-browser-panel/public)

[<h2>Demo Online</h2>](https://anarkrypto.github.io/upload-files-to-ipfs-from-browser-panel/public)



Você pode acessar o mesmo neste link. É o mesmo código, hospedado pelo Github Pages


Caso decida usar um node IPFS rodando localmente, lembre-se de [Setar o Cors](#Cors) corretamente.

Caso contrário terá erros de permissão nas requisiçôes.

## Instalando e rodando (node js):

Primeiramente resolva as dependências (git, npm e node js)

Debian / Ubuntu:
```bash
sudo apt update && sudo apt upgrade

sudo apt install curl python-software-properties

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt install nodejs

sudo apt install git
```

Para verificar as versões instaladas:
```bash
node -v
npm -v
git --version
```

Instalando
## Running locally (node js):

```bash
// Clone this project
git clone https://github.com/anarkrypto/upload-files-to-ipfs-from-browser-panel.git

// Go to the project directory
cd upload-files-to-ipfs-from-browser-panel

// Instal node dependencies
npm install
```


Para iniciar o servidor localmente então, (porta 3000 por padrão), digite no mesmo diretório:

```bash
node app.js
// Run the server:
app.js
```

Se deu tudo certo, ele vai retornar algo como
If everything went well, it will return something like:
``` Server listening on https://localhost:3000 ```

Então abra este endereço https://localhost:3000 no seu navegador e pronto! Já pode começar a enviar seus arquivos, a interface é intuitiva.
So open the address https://localhost:3000 in your browser and that's it!
You can now start uploading your files.


### Para rodar a API em um node IPFS localmente
### Sending to a local IPFS node


Caso ainda não tenha instalado, siga os passos de instalação e configuração do node IPFS: [IPFS - Getting Started](https://ipfs.io/ipfs/Qme5m1hmmMbjdzcDeUC2LtHZxAABYtdmq5mBpvtBsC8VL5/docs/getting-started/)
If you haven't installed it yet, follow the steps to install and configure the IPFS node: [IPFS - Getting Started](https://ipfs.io/ipfs/Qme5m1hmmMbjdzcDeUC2LtHZxAABYtdmq5mBpvtBsC8VL5/docs/getting-started/)

#### Cors
Após isso, configure o CORS, com os seguintes comandos no seu terminal:

To use an IPFS node running locally you need to set IPFS CORS policies correctly.

Otherwise, you will have permission errors in the requests.

Paste the following commands in your terminal:

```bash
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["*"]'
Expand All @@ -90,11 +57,11 @@ ipfs config --json API.HTTPHeaders.Access-Control-Expose-Headers '["Location"]'
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials '["true"]'
```

Inicie o node novamente
Start / Restart IPFS node:
```bash
ipfs daemon
```

Pronto! Seu node estará online localmente e pronto pra servir as requisições API.
Ready! Your node will be online locally and ready to serve API requests.

Por padrão, o node IPFS roda a API em localhost:5001 (ou 127.0.0.1:5001). E o gateway na porta 8080.
By default, the IPFS node runs the API at localhost:5001 (or 127.0.0.1:5001). And the gateway on port 8080.
23 changes: 23 additions & 0 deletions ipfs/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
// Change this file as you need it

const config = {
port: 5001,
gateway: 8080
}

const node = {
// default remote Node
default: 'remote',
remote: {
address: 'ipfs.sea.tube',
...config,
protocol: 'https'
},

// default local node
local: {
address: '127.0.0.1',
...config,
protocol: 'http'
}
}
213 changes: 213 additions & 0 deletions ipfs/css/node-menu.css
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit f8ffe2e

Please sign in to comment.