<div id="app">
<div>
<h1>Addressing by CID with Helia and dag-cbor</h1>
<div class="card">
<textarea id="user-input" name="user-input">{ "hello": "world" }</textarea>
<br />
<button id="get-cid">Get CID</button>
<button id="export-car">Export CAR</button>
</div>
<br />
<div class="card">
<h2>Fetch a CAR and import into Helia</h2>
<label for="cid-input">CID:</label>
<input size="60" id="cid-input" type="text" value="bafyreicnokmhmrnlp2wjhyk2haep4tqxiptwfrp2rrs7rzq7uk766chqvq"/>
<button id="fetch-car">Fetch CAR</button>
</div>
<p id="output" class="output"></p>
</div>
</div>
import { createHeliaHTTP } from 'https://esm.sh/@helia/http?bundle-deps'
import { dagCbor } from 'https://esm.sh/@helia/dag-cbor?bundle-deps'
import { CarWriter, CarReader } from 'https://esm.sh/@ipld/car?bundle-deps'
import { car } from 'https://esm.sh/@helia/car?bundle-deps'
const output = document.getElementById('output')
const cidInput = document.getElementById('cid-input')
const input = document.getElementById('user-input')
const button = document.getElementById('get-cid')
const exportButton = document.getElementById('export-car')
const fetchButton = document.getElementById('fetch-car')
const helia = await createHeliaHTTP()
const dcbor = dagCbor(helia)
let cid
let cidWithLink
button.addEventListener('click', handleGetCid)
exportButton.addEventListener('click', handleExportCar)
fetchButton.addEventListener('click', handleFetchCar)
async function handleGetCid(event) {
try {
const object = JSON.parse(input.value)
// Encode the file with dag-cbor
cid = await dcbor.add(object)
cidWithLink = await dcbor.add({ importantMessage: cid })
// Display the CID
output.innerHTML = `Object addressed by CID: <a href="https://cid.ipfs.tech/#${cid.toString()}">${cid.toString()}</a>`
} catch (err) {
console.error(err)
document.getElementById('output').textContent =
`Error: ${err.message}`
}
}
async function handleExportCar(event) {
if(cid == null) { return }
const { writer, out } = await CarWriter.create(cidWithLink)
car(helia).export(cidWithLink, writer)
const parts = []
for await (const part of out) {
parts.push(part)
}
const carBlob = new Blob(parts, { type: 'application/car' })
const downloadEl = document.createElement('a')
const blobUrl = window.URL.createObjectURL(carBlob)
downloadEl.href = blobUrl
downloadEl.download = 'signed-message.car'
document.body.appendChild(downloadEl)
downloadEl.click()
window.URL.revokeObjectURL(blobUrl)
}
async function handleFetchCar(event) {
const cid = cidInput.value
// for dmo purposes. In most cases you will either use Helia to fetch or import a CAR from user upload
const resp = await fetch(`https://ipfs.io/ipfs/${cid}?format=car`)
if(!resp.ok) return
// resp.body is an iterable! (won't work in Safari)
const reader = await CarReader.fromIterable(resp.body)
const roots = await reader.getRoots()
await car(helia).import(reader)
// await dcbor.get(cid)
output.innerHTML = `Fetched and imported CAR with root CID: <a href="https://cid.ipfs.tech/#${cid.toString()}">${cid.toString()}</a>`
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.