AG Design System

Block

File Upload

Drag-and-drop upload zone with file type and size constraints. Use for attachments and media uploads.

Uses:CardUploader

Playground

Preview
File Upload
Drag and drop or browse
Upload filesPNG, JPG, PDF up to 10MB

Configure

Code

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>File Upload</CardTitle>
    <CardDescription>Drag and drop or browse</CardDescription>
  </CardHeader>
  <CardContent>
    <Uploader size="card" state="default" className="w-full">
      <UploaderMedia>
        <Upload aria-hidden />
      </UploaderMedia>
      <UploaderContent>
        <UploaderTitle>Upload files</UploaderTitle>
        <UploaderDescription>PNG, JPG, PDF up to 10MB</UploaderDescription>
      </UploaderContent>
    </Uploader>
  </CardContent>
</Card>