Building a directory after uploading individual files async

directory-builder.js

import { createWriter } from '@ipld/unixfs'
import * as CAR from '@web3-storage/upload-client/car'
import { create } from '@web3-storage/w3up-client'

/**
 * @param {import('@web3-storage/w3up-client').Client} client
 * @param {import('@web3-storage/w3up-client/types').FileLike} file
 */
async function uploadFile (client, file) {
  /** @type {import('@web3-storage/upload-client/types').DirectoryEntryLink[]} */
  const entries = []
  await client.uploadDirectory([file], { onDirectoryEntryLink: e => entries.push(e) })
  return entries.at(0)
}

/**
 * @param {import('@web3-storage/w3up-client').Client} client
 * @param {import('@web3-storage/upload-client/types').DirectoryEntryLink[]} entries
 */
async function uploadDir (client, entries) {
  const { readable, writable } = new TransformStream({})
  const unixfsWriter = createWriter({ writable })
  const dirWriter = unixfsWriter.createDirectoryWriter()
  for (const entry of entries) {
    // @ts-expect-error
    dirWriter.set(entry.name, entry)
  }
  dirWriter.close()
  unixfsWriter.close()

  const blocks = []
  await readable.pipeTo(new WritableStream({ write: b => { blocks.push(b) } }))
  const car = await CAR.encode(blocks)
  return await client.uploadCAR(car)
}


async function main () {
  const client = await create()

  // for each file you receive
  const file = new File(['🐈'], 'cat.gif')
  const entry = await uploadFile(client, file)
  if (!entry) throw new Error('no entry from uploadFile')

  // persist `entry` - entry.name + entry.cid + entry.dagByteLength

  // later, when you have all the entries:
  await uploadDir(client, [entry])
}

main()