UploadCN
DocsComponentsExamples

Camera Upload

Take photos with the device camera and upload them as you go, with a file picker fallback when there's no camera or access is denied.

"use client"

import { demoAdapter } from "@/examples/_demo"
import { CameraUpload } from "@/components/camera-upload"

export default function CameraUploadExample() {
  return (
    <div className="w-full max-w-md">
      <CameraUpload adapter={demoAdapter} />
    </div>
  )
}

Installation

npx shadcn@latest add @uploadcn/camera-upload

Usage

import { CameraUpload } from "@/components/camera-upload"
<CameraUpload facingMode="user" maxFiles={5} />

CameraCapture is exported too, drop it inside any <Upload> to add a viewfinder. The useCamera hook releases the camera on unmount.

useCamera

The hook behind the viewfinder. It's installed with the component.

const { videoRef, status, start, stop, flip, capture } = useCamera()

<video ref={videoRef} muted playsInline />
<button onClick={() => start()}>Open camera</button>
<button onClick={async () => uploader.add([await capture()])}>Snap</button>

status is idle, starting, ready, denied, unavailable or error.

Props

Prop

Type

On this page

InstallationUsageuseCameraProps