mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
144 lines
No EOL
4.8 KiB
Text
144 lines
No EOL
4.8 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>
|
|
|
|
The `FileUploader` components provide a complete solution for file uploads, including
|
|
a button trigger, drag-and-drop container, and file list display. The components
|
|
support various states, file validation, and customization options.
|
|
|
|
## File uploader (button-only)
|
|
|
|
Create a simple file upload button using `FileUploaderButton`. By default, it
|
|
accepts a single file. Set `multiple` to `true` to allow multiple file selection.
|
|
|
|
<FileUploaderButton labelText="Add file" />
|
|
|
|
## Multiple files
|
|
|
|
Enable multiple file selection by setting the `multiple` prop to `true`. This
|
|
allows users to select multiple files at once.
|
|
|
|
<FileUploaderButton multiple labelText="Add files" />
|
|
|
|
## Custom button kind, size
|
|
|
|
Customize the button appearance using the `kind` and `size` props. The default is
|
|
a small primary 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` component combines a button trigger with a list of uploaded
|
|
files. It supports file type restrictions, multiple file selection, and various
|
|
upload states.
|
|
|
|
This example accepts multiple JPEG files and displays them in a completed state.
|
|
|
|
<FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
|
|
|
|
## Clear files
|
|
|
|
Remove uploaded files from the `FileUploader` component in two ways:
|
|
|
|
<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)
|
|
|
|
Disable the file uploader by setting the `disabled` prop to `true`. This prevents
|
|
user interaction with the component.
|
|
|
|
<FileUploader disabled multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
|
|
|
|
## Item (uploading)
|
|
|
|
Display a file upload in progress using the `uploading` status. This shows a
|
|
loading indicator and the file name.
|
|
|
|
<FileUploaderItem name="README.md" status="uploading" />
|
|
|
|
## Item (complete)
|
|
|
|
Show a successfully uploaded file using the `complete` status. This displays a
|
|
checkmark icon next to the file name.
|
|
|
|
<FileUploaderItem name="README.md" status="complete" />
|
|
|
|
## Item (edit)
|
|
|
|
Enable file deletion by setting the status to `"edit"`. Clicking the close icon
|
|
dispatches a `delete` event with the item's ID.
|
|
|
|
<FileUploaderItem id="readme" name="README.md" status="edit" on:delete={(e) => {
|
|
console.log(e.detail); // "readme"
|
|
}} />
|
|
|
|
## Item (edit status, invalid state)
|
|
|
|
Mark a file as invalid while keeping it editable. This shows an error icon and
|
|
allows the user to remove the file.
|
|
|
|
<FileUploaderItem invalid id="readme" name="README.md" status="edit" on:delete />
|
|
|
|
## Item (edit status, invalid state with subject, body)
|
|
|
|
Provide detailed error messages for invalid files using the `errorSubject` and
|
|
`errorBody` props. This helps users understand and resolve upload issues.
|
|
|
|
<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
|
|
|
|
Customize the size of file uploader items using the `size` prop. The default 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
|
|
|
|
Use `FileUploaderDropContainer` for drag-and-drop file uploads. It supports file
|
|
validation and multiple file selection.
|
|
|
|
This example accepts files smaller than 1 kB and logs the selected files to the
|
|
console.
|
|
|
|
<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
|
|
|
|
Display a loading state using the `FileUploaderSkeleton` component. This provides
|
|
visual feedback while the file uploader content is being loaded.
|
|
|
|
<FileUploaderSkeleton /> |