W3:UI

Components
KeyringUploaderUploads List
Examples
ReactSolidVueAPI Reference
ui-keyring

A file upload component to simplify web3.storage data uptake.

Tools to build content addressed datastructures, serialize them and send them to the service. Automatically split large uploads into multiple parts and send them quickly to a massively scalable IPFS blockstore for almost immediate availability from IPFS HTTP Gateways and speedy aggregation and inclusion in Filecoin deals.

Supported frameworks: React, Solid, Vue

Automatically Chunk and Process

All files large or small or content addressed, chunked and serialized ensuring top tier reliability

Global Scalability & Availability

Using the IPFS blockstore your files are available almost immediately in a variety of gateways

import React, { useState } from 'react'
import { useUploader } from '@w3ui/react-uploader'

export default function Component () {
  const [, uploader] = useUploader()
  const [file, setFile] = useState(null)
  const [dataCid, setDataCid] = useState('')

  const handleUploadSubmit = async e => {
    e.preventDefault()
    const cid = await uploader.uploadFile(file)
    setDataCid(cid)
  }

  if (dataCid) {
    return (
      <div>
        <h1>Done!</h1>
        <p>{dataCid.toString()}</p>
        <p><a href={`https://${dataCid}.ipfs.w3s.link`}>View {file.name} on IPFS Gateway.</a></p>
      </div>
    )
  }

  return (
    <form onSubmit={handleUploadSubmit}>
      <div>
        <label htmlFor='file'>File:</label>
        <input id='file' type='file' onChange={e => setFile(e.target.files[0])} required />
      </div>
      <button type='submit'>Upload</button>
    </form>
  )
}
View on codesandbox.io