Skip to content
This repository has been archived by the owner on Jan 12, 2024. It is now read-only.

Commit

Permalink
docs: almost all browser examples passing
Browse files Browse the repository at this point in the history
  • Loading branch information
achingbrain authored and Alan Shaw committed Jan 24, 2020
1 parent 37864a8 commit 93ad92d
Show file tree
Hide file tree
Showing 13 changed files with 72 additions and 64 deletions.
30 changes: 16 additions & 14 deletions browser-add-readable-stream/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,27 +38,29 @@ const createFiles = (directory) => {
}]
}

const streamFiles = (ipfs, directory, files) => new Promise((resolve, reject) => {
const streamFiles = async (ipfs, directory, files) => {
// Create a stream to write files to
const stream = ipfs.addReadableStream()
const stream = new ReadableStream({
start(controller) {
for (let i = 0; i < files.length; i++) {
// Add the files one by one
controller.enqueue(files[i])
}

// When we have no more files to add, close the stream
controller.close()
}
})

stream.on('data', (data) => {
for await (const data of ipfs.add(stream)) {
log(`Added ${data.path} hash: ${data.hash}`)

// The last data event will contain the directory hash
if (data.path === directory) {
resolve(data.hash)
return data.cid
}
})

stream.on('error', reject)

// Add the files one by one
files.forEach(file => stream.write(file))

// When we have no more files to add, close the stream
stream.end()
})
}
}

const log = (line) => {
document.getElementById('output').appendChild(document.createTextNode(`${line}\r\n`))
Expand Down
2 changes: 1 addition & 1 deletion browser-browserify/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h1>JS IPFS - Add data to IPFS from the browser</h1>
<button id="store">Add text to ipfs</button>
<div id="output" style="display: none">
<div>found in ipfs:</div>
<div class="content" id="hash">[ipfs hash]</div>
<div class="content" id="cid">[ipfs cid]</div>
<div class="content" id="content">[ipfs content]</div>
</div>
</body>
Expand Down
21 changes: 10 additions & 11 deletions browser-browserify/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,22 @@ document.addEventListener('DOMContentLoaded', async () => {

async function store () {
const toStore = document.getElementById('source').value
const result = await node.add(toStore)

for (const file of result) {
if (file && file.hash) {
console.log('successfully stored', file.hash)
for await (const file of node.add(toStore)) {
if (file && file.cid) {
console.log('successfully stored', file.cid)

await display(file.hash)
await display(file.cid)
}
}
}

async function display (hash) {
const data = await node.cat(hash)

document.getElementById('hash').innerText = hash
document.getElementById('content').innerText = data
document.getElementById('output').setAttribute('style', 'display: block')
async function display (cid) {
for await (const data of node.cat(cid)) {
document.getElementById('cid').innerText = cid
document.getElementById('content').innerText = data
document.getElementById('output').setAttribute('style', 'display: block')
}
}

document.getElementById('store').onclick = store
Expand Down
2 changes: 1 addition & 1 deletion browser-browserify/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ module.exports = {
.click('#store')
.waitForElementVisible('#output')

browser.expect.element('#hash').text.to.contain('QmWfVY9y3xjsixTgbd9AorQxH7VtMpzfx2HaWtsoUYecaX')
browser.expect.element('#cid').text.to.contain('QmWfVY9y3xjsixTgbd9AorQxH7VtMpzfx2HaWtsoUYecaX')
browser.expect.element('#content').text.to.contain('hello')

browser.end()
Expand Down
1 change: 1 addition & 0 deletions browser-create-react-app/src/hooks/use-ipfs-factory.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default function useIpfsFactory ({ commands }) {
if (ipfs && ipfs.stop) {
console.log('Stopping IPFS')
ipfs.stop().catch(err => console.error(err))
ipfs = null
setIpfsReady(false)
}
}
Expand Down
9 changes: 1 addition & 8 deletions browser-mfs/filetree.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
'use strict'

const {
log,
createNode
} = require('./utils')

Expand All @@ -20,13 +19,7 @@ const loadFiles = async (ipfs, path) => {
const output = {}
path = path.replace(/\/\/+/g, '/')

const contents = await ipfs.files.ls(path, {
long: true
})
.catch(error => log(error))

for (let i = 0; i < contents.length; i++) {
let entry = contents[i]
for await (const entry of ipfs.files.ls(path)) {
output[entry.name] = entry

if (entry.type === FILE_TYPES.DIRECTORY) {
Expand Down
14 changes: 9 additions & 5 deletions browser-parceljs/public/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,18 @@ document.addEventListener('DOMContentLoaded', async () => {

log(`The IPFS node version is ${version.version}`)

const filesAdded = await node.add({
for await (const entry of node.add({
path: 'hello-parcel.txt',
content: 'Hello from parcel.js bundled ipfs example'
})
})) {
log(`This page deployed ${entry.path} to IPFS and its CID is ${entry.cid}`)

log(`This page deployed ${filesAdded[0].path} to IPFS and its hash is ${filesAdded[0].hash}`)
const buffers = []

const fileBuffer = await node.cat(filesAdded[0].hash)
for await (const buf of node.cat(entry.cid)) {
buffers.push(buf)
}

log(`The contents of the file was: ${fileBuffer.toString()}`)
log(`The contents of the file was: ${Buffer.concat(buffers).toString()}`)
}
})
2 changes: 1 addition & 1 deletion browser-readablestream/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<div id="container" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">
<div id="form-wrapper">
<form>
<input type="text" id="hash" placeholder="Hash" disabled />
<input type="text" id="cid" placeholder="CID" disabled />
<button id="gobutton" disabled>Go!</button>
</form>
<video id="video" controls></video>
Expand Down
11 changes: 6 additions & 5 deletions browser-readablestream/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

const Ipfs = require('../../')
const VideoStream = require('videostream')
const toStream = require('it-to-stream')
const {
dragDrop,
statusMessages,
Expand All @@ -18,14 +19,14 @@ document.addEventListener('DOMContentLoaded', async () => {

// Set up event listeners on the <video> element from index.html
const videoElement = createVideoElement()
const hashInput = document.getElementById('hash')
const cidInput = document.getElementById('cid')
const goButton = document.getElementById('gobutton')
let stream

goButton.onclick = function (event) {
event.preventDefault()

log(`IPFS: Playing ${hashInput.value.trim()}`)
log(`IPFS: Playing ${cidInput.value.trim()}`)

// Set up the video stream an attach it to our <video> element
const videoStream = new VideoStream({
Expand All @@ -46,10 +47,10 @@ document.addEventListener('DOMContentLoaded', async () => {
}

// This stream will contain the requested bytes
stream = ipfs.catReadableStream(hashInput.value.trim(), {
stream = toStream.readable(ipfs.cat(cidInput.value.trim(), {
offset: start,
length: end && end - start
})
}))

// Log error messages
stream.on('error', (error) => log(error))
Expand All @@ -73,6 +74,6 @@ document.addEventListener('DOMContentLoaded', async () => {
log('IPFS: Drop an .mp4 file into this window to add a file')
log('IPFS: Then press the "Go!" button to start playing a video')

hashInput.disabled = false
cidInput.disabled = false
goButton.disabled = false
})
3 changes: 2 additions & 1 deletion browser-readablestream/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"webpack": "^4.28.4"
},
"dependencies": {
"videostream": "^3.2.0"
"videostream": "^3.2.0",
"it-to-stream": "^0.1.1"
}
}
24 changes: 12 additions & 12 deletions browser-readablestream/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,23 +36,23 @@ const dragDrop = (ipfs) => {
const files = Array.from(event.dataTransfer.items)
.filter(item => item.kind === 'file')
.map(item => item.getAsFile())

for (const file of files) {
const progress = log(`IPFS: Adding ${file.name} 0%`)
const added = await ipfs.add({
path: file.name,
content: file
}, {
progress: (addedBytes) => {
progress.textContent = `IPFS: Adding ${file.name} ${parseInt((addedBytes / file.size) * 100)}%\r\n`
.map(file => {
return {
path: file.name,
content: file
}
})

const hash = added[0].hash
const progress = log(`IPFS: Adding...`)

log(`IPFS: Added ${hash}`)
for await (const added of ipfs.add(files, {
progress: (addedBytes) => {
progress.textContent = `IPFS: Adding ${addedBytes} bytes\r\n`
}
})) {
log(`IPFS: Added ${added.cid}`)

document.querySelector('#hash').value = hash
document.querySelector('#cid').value = added.cid.toString()
}

if (event.dataTransfer.items && event.dataTransfer.items.clear) {
Expand Down
2 changes: 1 addition & 1 deletion browser-video-streaming/index.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<html>
<body>
<video id="video" controls></video>
<script src="https://unpkg.com/ipfs/dist/index.js"></script>
<script src="../../dist/index.js"></script>
<script src="https://unpkg.com/hlsjs-ipfs-loader@0.1.4/dist/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="streaming.js"></script>
Expand Down
15 changes: 11 additions & 4 deletions browser-webpack/src/components/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,18 @@ class App extends React.Component {

this.setState({ id, agentVersion, protocolVersion })

const [{ hash }] = await node.add(stringToUse)
this.setState({ addedFileHash: hash })
for await (const { cid } of node.add(stringToUse)) {
this.setState({ addedFileHash: cid.toString() })

const data = await node.cat(hash)
this.setState({ addedFileContents: data.toString() })
let bufs = []

for await (const buf of node.cat(cid)) {
bufs.push(buf)
}

const data = Buffer.concat(bufs)
this.setState({ addedFileContents: data.toString('utf8') })
}
}

render () {
Expand Down

0 comments on commit 93ad92d

Please sign in to comment.