Dropzone
A file chooser that also accepts dropped files with type and size limits.
beta
Try it
Project documents No file chosen
Drop files here or choose a file
<Dropzone label="Project documents" multiple />Examples
Project documents
Project documents No file chosen
Drop files here or choose a file
<script lang="ts">
import Dropzone from '@tcpsystems/ui/foundation/Dropzone';
import '@tcpsystems/ui/foundation/elements/dropzone';
</script>
<Dropzone label="Project documents" multiple />File restrictions
Invoice PDF No file chosen
Drop one PDF here, up to 2 MB, or choose a file.
<script lang="ts">
import Dropzone from '@tcpsystems/ui/foundation/Dropzone';
import '@tcpsystems/ui/foundation/elements/dropzone';
</script>
<Dropzone label="Invoice PDF" accept=".pdf" maxBytes={2000000} hint="Drop one PDF here, up to 2 MB, or choose a file." />Drag over
Release assets No file chosen
Release assets can be dropped here.
<script lang="ts">
import Dropzone from '@tcpsystems/ui/foundation/Dropzone';
import '@tcpsystems/ui/foundation/elements/dropzone';
</script>
<Dropzone label="Release assets" multiple data-state="over" hint="Release assets can be dropped here." />Rejected file
Replacement invoice No file chosen
Choose a replacement PDF to clear the error.
Allowed file types: .pdf.Each file must be at most 2,000,000 bytes
<script lang="ts">
import Dropzone from '@tcpsystems/ui/foundation/Dropzone';
import '@tcpsystems/ui/foundation/elements/dropzone';
</script>
<Dropzone label="Replacement invoice" accept=".pdf" maxBytes={2000000} data-state="error" hint="Choose a replacement PDF to clear the error." />API
import Dropzone from '@tcpsystems/ui/foundation/Dropzone';| Prop | Type | Default |
|---|---|---|
label? | string | 'Files' |
hint? | string | d.hint |
name? | string | 'file' |
accept? | string | d.accept |
multiple? | boolean | false |
maxBytes? | number | d.maxBytes |
id? | string | uid |
| Hook | Kind |
|---|---|
.tcp-dropzone | Root class |
data-max-bytes | Data attribute |