mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
125 lines
No EOL
3.7 KiB
Text
125 lines
No EOL
3.7 KiB
Text
---
|
|
components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer", "FileUploaderItem", "FileUploaderSkeleton"]
|
|
---
|
|
|
|
<script>
|
|
import { FileUploaderButton, FileUploader, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, UnorderedList, ListItem } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## File uploader (button-only)
|
|
|
|
By default, the file uploader only accepts one file.
|
|
|
|
Set `multiple` to `true` for multiple files to be accepted.
|
|
|
|
<FileUploaderButton labelText="Add file" />
|
|
|
|
## Multiple files
|
|
|
|
<FileUploaderButton multiple labelText="Add files" />
|
|
|
|
## Custom button kind, size
|
|
|
|
By default, the `primary` small button kind is used.
|
|
|
|
Use the `kind` and `size` props to customize the button.
|
|
|
|
<FileUploaderButton kind="secondary" size="field" />
|
|
<FileUploaderButton kind="tertiary" size="default" />
|
|
<FileUploaderButton kind="danger" size="lg" />
|
|
<FileUploaderButton kind="danger-tertiary" size="xl" />
|
|
|
|
## File uploader
|
|
|
|
The `FileUploader` wraps `FileUploaderButton` and lists out uploaded files.
|
|
|
|
The example below accepts multiple files with an extension of `.jpg` or `.jpeg`. It sets the status to `"complete"`; by default, the status is `"loading"`.
|
|
|
|
See the [item examples below](#item-uploading) for different statuses.
|
|
|
|
<FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
|
|
|
|
## Clear files
|
|
|
|
There are two ways to clear files in `FileUploader`:
|
|
|
|
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
|
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
|
|
<ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
|
|
</UnorderedList>
|
|
|
|
<FileSource src="/framed/FileUploader/FileUploaderClearFiles" />
|
|
|
|
## File uploader (disabled state)
|
|
|
|
<FileUploader disabled multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
|
|
|
|
## Item (uploading)
|
|
|
|
<FileUploaderItem name="README.md" status="uploading" />
|
|
|
|
## Item (complete)
|
|
|
|
<FileUploaderItem name="README.md" status="complete" />
|
|
|
|
## Item (edit)
|
|
|
|
If the `status` is `"edit"`, clicking the close icon will dispatch a `delete` event.
|
|
|
|
The event detail contains the item `id`.
|
|
|
|
<FileUploaderItem id="readme" name="README.md" status="edit" on:delete={(e) => {
|
|
console.log(e.detail); // "readme"
|
|
}} />
|
|
|
|
## Item (edit status, invalid state)
|
|
|
|
An item can also have an edit status with an invalid state.
|
|
|
|
<FileUploaderItem invalid id="readme" name="README.md" status="edit" on:delete />
|
|
|
|
## Item (edit status, invalid state with subject, body)
|
|
|
|
Use the `errorSubject` and `errorBody` props to customize the error message.
|
|
|
|
<FileUploaderItem
|
|
invalid
|
|
id="readme"
|
|
name="README.md"
|
|
errorSubject="File size exceeds 500kb limit"
|
|
errorBody="Please select a new file."
|
|
status="edit"
|
|
on:delete
|
|
/>
|
|
|
|
## Item sizes
|
|
|
|
The default `FileUploaderItem` size is "default".
|
|
|
|
<FileUploaderItem size="default" name="README.md" status="uploading" />
|
|
<FileUploaderItem size="field" name="README.md" status="uploading" />
|
|
<FileUploaderItem size="small" name="README.md" status="uploading" />
|
|
|
|
## Drop container
|
|
|
|
The `FileUploaderDropContainer` accepts files through click and drop events.
|
|
|
|
Use the `validateFiles` prop to filter out files before they are set.
|
|
|
|
The following example accepts files smaller than 1 kB.
|
|
|
|
<FileUploaderDropContainer
|
|
multiple
|
|
labelText="Drag and drop files here or click to upload"
|
|
validateFiles={files => {
|
|
return files.filter(file => file.size < 1_024)
|
|
}}
|
|
on:change={e=> {
|
|
console.log("files", e.detail)
|
|
}}
|
|
/>
|
|
|
|
## Skeleton
|
|
|
|
<FileUploaderSkeleton /> |