Skip to content
This repository was archived by the owner on Mar 10, 2020. It is now read-only.

Commit c527bf2

Browse files
daviddiasdaviddias
authored
Merge pull request #321 from taravancil/name-example
Add example of using name in the browser
2 parents 802d98d + 72558ab commit c527bf2

File tree

5 files changed

+232
-0
lines changed

5 files changed

+232
-0
lines changed

‎examples/browser-name/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bundle.js

‎examples/browser-name/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# JS IPFS API - Example Browser - Name
2+
3+
## Setup
4+
5+
Install [go-ipfs](https://ipfs.io/docs/install/) and start the daemon
6+
7+
```bash
8+
$ ipfs daemon
9+
```
10+
11+
then in this folder run
12+
13+
```bash
14+
$ npm install
15+
$ npm start
16+
```
17+
18+
and open your browser at `http://localhost:8888`.

‎examples/browser-name/index.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>JS IPFS API name example</title>
6+
<style>
7+
.hidden {
8+
opacity: 0;
9+
}
10+
11+
form {
12+
padding-bottom: 1em;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<h1>js-ipfs-api</h1>
19+
<h2><code>name.publish()</code> and <code>name.resolve()</code></h2>
20+
<p id="status" style="color: white; padding: .5em; background: blue">
21+
initializing...
22+
</p>
23+
24+
<form id="publish-text">
25+
<h3>Add a new file to IPFS and publish it.</h3>
26+
<textarea name="text" placeholder="hello, world" required></textarea>
27+
<button type="submit" disabled>Publish</button>
28+
</form>
29+
30+
<form id="publish-path">
31+
<h3>Publish an existing file or directory from IPFS.</h3>
32+
<input name="path" type="text" placeholder="IPFS path" required/>
33+
<button type="submit" disabled>Publish</button>
34+
</form>
35+
36+
<div class="results--publish hidden">
37+
<p>
38+
Published at <code id="publish-result"></code>
39+
</p>
40+
<p>
41+
<a id="publish-gateway-link">Open with HTTP gateway</a>
42+
</p>
43+
</div>
44+
45+
<hr />
46+
47+
<form id="resolve-name">
48+
<h3>Resolve an IPNS name</h3>
49+
<input name="name" type="text" placeholder="IPNS name" required />
50+
<button type="submit" disabled>Resolve</button>
51+
</form>
52+
<div class="results--resolve hidden">
53+
<p>
54+
Resolves to <code id="resolve-result"></code>
55+
</p>
56+
<p>
57+
<a id="resolve-gateway-link">Open with HTTP gateway</a>
58+
</p>
59+
</div>
60+
61+
<script src="https://npmcdn.com/ipfs-api/dist/index.js"></script>
62+
<script src="bundle.js"></script>
63+
</body>
64+
</html>

‎examples/browser-name/index.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
const ipfs = window.IpfsApi()
2+
3+
const DOM = {
4+
status: document.getElementById('status'),
5+
buttons: document.getElementsByTagName('button'),
6+
publishNew: document.forms[0],
7+
publishPath: document.forms[1],
8+
resolveName: document.forms[2],
9+
publishResultsDiv: document.querySelector('.results--publish'),
10+
resolveResultsDiv: document.querySelector('.results--resolve'),
11+
publishResult: document.getElementById('publish-result'),
12+
resolveResult: document.getElementById('resolve-result'),
13+
publishGatewayLink: document.getElementById('publish-gateway-link'),
14+
resolveGatewayLink: document.getElementById('resolve-gateway-link'),
15+
}
16+
17+
const COLORS = {
18+
active: 'blue',
19+
success: 'green',
20+
error: 'red'
21+
}
22+
23+
const IPFS_DOMAIN = 'https://ipfs.io'
24+
25+
const showStatus = (text, bg) => {
26+
DOM.status.innerText = text
27+
DOM.status.style.background = bg
28+
}
29+
30+
const enableForms = () => {
31+
for (let btn of DOM.buttons) {
32+
btn.disabled = false
33+
}
34+
}
35+
36+
const init = () => {
37+
ipfs.id()
38+
.then(res => {
39+
showStatus(`daemon active\nid: ${res.ID}`, COLORS.success)
40+
enableForms()
41+
})
42+
.catch(err => {
43+
showStatus('daemon inactive', COLORS.error)
44+
console.error(err)
45+
})
46+
}
47+
48+
// Adds a new file to IPFS and publish it
49+
const addAndPublish = (e) => {
50+
e.preventDefault()
51+
52+
let input = e.target.elements['text']
53+
let buffer = new Buffer(input.value)
54+
55+
showStatus('adding to IPFS...', COLORS.active)
56+
57+
ipfs.add(buffer)
58+
.then(res => {
59+
showStatus(`success!`, COLORS.success)
60+
61+
publish(res[0].path)
62+
63+
input.value = ''
64+
})
65+
.catch(err => {
66+
showStatus(`error adding ${path}`, COLORS.error)
67+
console.error(err)
68+
})
69+
}
70+
71+
// Publishes an IPFS file or directory under your node's identity
72+
const publish = (path) => {
73+
showStatus(`publishing...`, COLORS.active)
74+
DOM.publishResultsDiv.classList.add('hidden')
75+
76+
ipfs.name.publish(path)
77+
.then(res => {
78+
const name = res.Name
79+
80+
showStatus('success!', COLORS.success)
81+
DOM.publishResultsDiv.classList.remove('hidden')
82+
DOM.publishResult.innerText = `/ipns/${name}`
83+
DOM.publishGatewayLink.href = `${IPFS_DOMAIN}/ipns/${name}`
84+
})
85+
.catch(err => {
86+
showStatus(`error publishing ${path}`, COLORS.error)
87+
console.error(err)
88+
})
89+
}
90+
91+
// Resolves an IPNS name
92+
const resolve = (name) => {
93+
showStatus(`resolving...`, COLORS.active)
94+
DOM.resolveResultsDiv.classList.add('hidden')
95+
96+
ipfs.name.resolve(name)
97+
.then(res => {
98+
const path = res.Path
99+
100+
showStatus('success!', COLORS.success)
101+
DOM.resolveResultsDiv.classList.remove('hidden')
102+
DOM.resolveResult.innerText = path
103+
DOM.resolveGatewayLink.href = `${IPFS_DOMAIN}${path}`
104+
})
105+
.catch(err => {
106+
showStatus(`error resolving ${name}`, COLORS.error)
107+
console.error(err)
108+
})
109+
}
110+
111+
// Event listeners
112+
DOM.publishNew.onsubmit = addAndPublish
113+
114+
DOM.publishPath.onsubmit = (e) => {
115+
e.preventDefault()
116+
let input = e.target.elements['path']
117+
publish(input.value)
118+
input.value = ''
119+
}
120+
121+
DOM.resolveName.onsubmit = (e) => {
122+
e.preventDefault()
123+
let input = e.target.elements['name']
124+
resolve(input.value)
125+
input.value = ''
126+
}
127+
128+
init()

‎examples/browser-name/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "js-ipfs-api-example-name-publish-resolve",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "browserify index.js > bundle.js && http-server -a 127.0.0.1 -p 8888"
8+
},
9+
"author": "Tara Vancil <tbvanc@gmail.com>",
10+
"license": "MIT",
11+
"devDependencies": {
12+
"babelify": "^7.3.0",
13+
"browserify": "^13.0.1",
14+
"buffer-browserify": "^0.2.5",
15+
"http-server": "^0.9.0",
16+
"ipfs-api": "^6.0.3"
17+
},
18+
"browserify": {
19+
"transform": ["babelify"]
20+
}
21+
}

0 commit comments

Comments
 (0)