<div id="app">
  <div>
    <h1>Addressing a file by CID with Helia and UnixFS</h1>
    <div class="card">
      <label for="user-file">Choose a file:</label>
      <input type="file" id="user-file" name="user-file" />
    </div>
    
    <p id="output" class="output"></p>
  </div>
</div>
import { createHeliaHTTP } from 'https://esm.sh/@helia/http?bundle-deps'
import { unixfs } from 'https://esm.sh/@helia/unixfs?bundle-deps'

const output = document.getElementById('output')
const fileInput = document.getElementById('user-file')
const helia = await createHeliaHTTP()
const fs = unixfs(helia)
    
fileInput.addEventListener('change', handleFileUpload)

async function handleFileUpload(event) {
  try {
    const file = event.target.files[0]
    if (!file) return
    
    // Encode the file with UnixFS
    const cid = await fs.addFile({
      content: file.stream(),
      path: file.name
    })
    
    // Display the CID
    output.innerHTML = `File addressedf 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}`
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.