Got basic IPFS file contents load and rendering working.
This commit is contained in:
parent
013f198b74
commit
a79b73e112
|
@ -1,3 +1,4 @@
|
||||||
|
dist
|
||||||
node_modules
|
node_modules
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
dist
|
package-lock.json
|
||||||
|
|
28
index.html
28
index.html
|
@ -1,31 +1,9 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Sample App</title>
|
<title>IPFS JavaScript gateway</title>
|
||||||
|
<style type="text/css">body {margin: 0}</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script>
|
<script type="text/javascript" src="/dist/bundle.js"></script>
|
||||||
// From https://github.com/LZMA-JS/LZMA-JS (lzma-d.js)
|
|
||||||
/*var e=function(){"use ...*/
|
|
||||||
|
|
||||||
// Data portion made with: webpack && cat dist/bundle.js | lzma | base64 -w 0
|
|
||||||
// IDEA: Load this from a CDN (unpkg.com?), and only resort to the local copy if the CDN copy doesn't load.
|
|
||||||
var compressed_javascript = "data:application/octet-stream;base64,XQAAgAD..."
|
|
||||||
document.body.insertAdjacentHTML('beforeend', new Date() + 'start<br />');
|
|
||||||
|
|
||||||
fetch(compressed_javascript).then(response => {
|
|
||||||
document.body.insertAdjacentHTML('beforeend', new Date() + 'decompressed<br />');
|
|
||||||
compressed_javascript = null
|
|
||||||
return response.arrayBuffer()
|
|
||||||
}).then(buffer => {
|
|
||||||
LZMA.decompress(new Uint8Array(buffer), function(result, error) {
|
|
||||||
document.body.insertAdjacentHTML('beforeend', new Date() + 'starting eval<br />');
|
|
||||||
buffer = null
|
|
||||||
eval(result)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// For conversion of this file to data URI, run: cat index.html | python -c "import urllib, sys; print urllib.quote(sys.stdin.read())"
|
|
||||||
// Then prepend with: "data:text/html;charset=utf-8,"
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -17,6 +17,6 @@
|
||||||
"webpack-dev-server": "^2.4.5"
|
"webpack-dev-server": "^2.4.5"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"ipfs": "file:../../"
|
"ipfs": "0.27.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
63
src/index.js
63
src/index.js
|
@ -1,65 +1,28 @@
|
||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
const IPFS = require('ipfs')
|
const IPFS = require('ipfs')
|
||||||
const Repo = require('ipfs-repo')
|
|
||||||
const LevelStore = require('datastore-level')
|
|
||||||
|
|
||||||
function MemoryLevelStore() {
|
|
||||||
return new LevelStore('/memory', {db: require('memdown')})
|
|
||||||
}
|
|
||||||
MemoryLevelStore.prototype = new LevelStore('/memory', {db: require('memdown')})
|
|
||||||
MemoryLevelStore.prototype.constructor = MemoryLevelStore
|
|
||||||
|
|
||||||
const stringToUse = 'Hello world from self-contained, self-hosted js-ipfs!!!'
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
let node
|
let node
|
||||||
|
|
||||||
create()
|
create()
|
||||||
|
|
||||||
function create () {
|
function create() {
|
||||||
// Create the IPFS node instance
|
node = new IPFS()
|
||||||
|
|
||||||
var repo_name = String(Math.random() + Date.now())
|
node.on('ready', () => {
|
||||||
var storage_backends = {
|
console.log('IPFS node is ready')
|
||||||
root: MemoryLevelStore,
|
console.log('loading IPFS content for ' + window.location.pathname)
|
||||||
blocks: MemoryLevelStore,
|
|
||||||
datastore: MemoryLevelStore,
|
|
||||||
}
|
|
||||||
|
|
||||||
node = new IPFS({ repo: new Repo(repo_name, {storageBackends: storage_backends}) })
|
// Load the page contents for the IPFS hash.
|
||||||
|
node.files.cat(window.location.pathname, (err, file) => {
|
||||||
node.once('ready', () => {
|
if (err) { throw err }
|
||||||
console.log('IPFS node is ready')
|
var iframe = document.createElement('iframe')
|
||||||
ops()
|
iframe.style = 'width: 100%; height: 100%; border: 0; overflow: hidden'
|
||||||
})
|
iframe.src = URL.createObjectURL(new Blob([file]))
|
||||||
}
|
document.body.appendChild(iframe)
|
||||||
|
})
|
||||||
function ops () {
|
|
||||||
node.id((err, res) => {
|
|
||||||
if (err) {
|
|
||||||
throw err
|
|
||||||
}
|
|
||||||
|
|
||||||
document.body.insertAdjacentHTML('beforeend',
|
|
||||||
"<h1>Everything is working!</h1>" +
|
|
||||||
"<p>Your ID is <strong>" + res.id + "</strong></p>" +
|
|
||||||
"<p>Your IPFS version is <strong>" + res.agentVersion + "</strong></p>" +
|
|
||||||
"<p>Your IPFS protocol version is <strong>" + res.protocolVersion + "</strong></p>"
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
node.files.add([Buffer.from(stringToUse)], (err, filesAdded) => {
|
|
||||||
if (err) { console.log("ERROR"); throw err }
|
|
||||||
|
|
||||||
const hash = filesAdded[0].hash
|
|
||||||
document.body.insertAdjacentHTML('beforeend', "<hr /><div>Added a file!<br /><a href=\"https://gateway.ipfs.io/ipfs/" + hash + "\">" + hash + "</a></div>")
|
|
||||||
|
|
||||||
node.files.cat(hash, (err, data) => {
|
|
||||||
if (err) { console.log("ERROR 2"); throw err }
|
|
||||||
document.body.insertAdjacentHTML('beforeend', "<p>Contents of this file: <br />" + data + "</p>")
|
|
||||||
})
|
})
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in New Issue