UploadCN
DocsComponentsExamples

Image Metadata

Images upload in the background while people write alt text and captions. Saving waits for every upload and, by default, every description.

"use client"

import { useUploader } from "@uploadcn/react"
import { toast } from "sonner"

import { demoAdapter, useSampleFiles } from "@/examples/_demo"
import { ImageMetadataUpload } from "@/components/image-metadata"

export default function ImageMetadataExample() {
  const uploader = useUploader({ adapter: demoAdapter, accept: "image/*" })
  useSampleFiles(uploader, "images")
  return (
    <ImageMetadataUpload
      uploader={uploader}
      className="max-w-2xl"
      onSave={(images) =>
        toast.success(`Saved ${images.length} images`, {
          description: images.map((image) => image.alt).join(" · "),
        })
      }
    />
  )
}

Installation

npx shadcn@latest add @uploadcn/image-metadata

Usage

import { ImageMetadataUpload } from "@/components/image-metadata"
<ImageMetadataUpload
  onSave={(images) =>
    images.map(({ item, alt, caption }) => ({
      key: item.result?.key,
      alt,
      caption,
    }))
  }
/>

Alt text and captions are stored on each item's meta with uploader.update(id, { meta }), so they survive re-renders and travel with the item.

Props

Prop

Type

On this page

InstallationUsageProps