File Uploader

Drag-and-drop file upload with progress indicator.

Preview · File Uploader

Code

HTML · @primus/ui-core
React
Angular

<div style="border:2px dashed var(--border);border-radius:var(--radius-medium);padding:2rem;text-align:center;background:var(--muted);max-width:360px">
  <div style="font-size:1.5rem;margin-bottom:0.5rem">📎</div>
  <p style="margin:0 0 0.5rem;font-size:0.875rem;font-weight:500">Drag files here or click to browse</p>
  <p style="margin:0;font-size:0.75rem;color:var(--muted-foreground)">PDF, PNG, JPG up to 10 MB</p>
  <button class="outline small" style="margin-top:0.75rem">Browse files</button>
</div>

import { FileUploader } from 'primus-react-ui';

<FileUploader apiUrl="https://api.yourdomain.com"
  accept="application/pdf,image/*" maxSize={10485760}
  onUploadComplete={(file) => setFiles(f => [...f, file])} />

<primus-file-uploader [apiUrl]="'https://api.yourdomain.com'"
  accept="application/pdf,image/*"
  (onUploadComplete)="onFileUploaded($event)">
</primus-file-uploader>

Props

Prop	Type	Default	Description
`apiUrl`	`string`	—	Upload URL
`accept`	`string`	—	MIME types
`maxSize`	`number`	—	Max bytes

Version history

See the Changelog for version history and breaking changes.

Code​

Props​

Code

Props