Preview

Features

• Pull the file back and let go to shoot. A dotted arc shows the first half second of the flight.
• Real misses: bricks off the rim, airballs and shots that never leave the floor. The file stays where it lands.
• The net is the progress bar. It fills as onUpload reports progress and turns green when the file is in.
• Dropping a file from your desktop puts it on the court. Dropping it straight into the hoop counts as a dunk.
• Enter or Space takes an assisted shot, three misses unlock "Let a pro shoot", and reduced motion skips the flight.
• accept, maxSize and multiple work like a normal file input. Reject the onUpload promise to drop the file back out.

Installation

npx shadcn@latest add https://www.shadcn-form.com/r/basketball-upload.json

The CLI installs every dependency listed in the registry item.

Usage

import { BasketballUpload } from '@/components/ui/basketball-upload'

const [files, setFiles] = React.useState<File[]>([])

<BasketballUpload
  value={files}
  onValueChange={setFiles}
  accept="image/*,.pdf"
  maxSize={4 * 1024 * 1024}
  onUpload={async (file, report) => {
    // Send the file; call report(0..1) as it goes and the net fills up.
    await upload(file, report)
  }}
/>