<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>`
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.