W3:UI

Components
AuthenticationUploaderUploads List
Examples
ReactAPI Reference
ui-auth

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

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 from 'react'
import { useUploader, Uploader } from '@w3ui/react'

export default function Component() {
  const [{ file }] = useUploader()
  const hasFile = file !== undefined
  return (
    <Uploader.Form>
      <label className={`${hasFile ? 'hidden' : 'block'}`}>File:</label>
      <Uploader.Input className={`${hasFile ? 'hidden' : 'block'}`} />
      <span className={`${hasFile ? 'block' : 'hidden'}`}>{file.name}</span>
      <button type='submit' disabled={!hasFile}>
        Upload
      </button>
    </Uploader.Form>
  )
}