Battery

A battery that charges cell by cell for device and photo backups, with a pulsing bolt while charging and a full glow when the backup completes.

"use client"

import { useUploader } from "@uploadcn/react"

import { demoAdapter, useSampleFiles } from "@/examples/_demo"
import { BatteryUpload } from "@/components/battery-upload"

export default function BatteryUploadExample() {
  const uploader = useUploader({ adapter: demoAdapter })
  useSampleFiles(uploader, "images")
  return (
    <div className="flex w-full justify-center">
      <BatteryUpload uploader={uploader} />
    </div>
  )
}

Installation

npx shadcn@latest add @uploadcn/battery-upload

Usage

import { BatteryUpload } from "@/components/battery-upload"
<BatteryUpload noun="photos" />

Five cells share one spring, each filling its fifth of the progress. Failed uploads turn the cells destructive. The caption is an aria-live region with counts, bytes and time left.

It uploads through your adapter like every other component, so it works with S3, R2, Cloudinary, local disk or your own API.

Props

Prop

Type

On this page