FileUploader

Source code
Table of Contents

Usage

File uploader (button-only)

<script>
  import { FileUploaderButton } from "carbon-components-svelte";
</script>

<FileUploaderButton labelText="Add files" />

File uploader

Upload files

Only JPEG files are accepted.

<script>
  import { FileUploader } from "carbon-components-svelte";
</script>

<FileUploader
  multiple
  labelTitle="Upload files"
  buttonLabel="Add files"
  labelDescription="Only JPEG files are accepted."
  accept={['.jpg', '.jpeg']}
  status="complete"
/>

Item (uploading)

README.md

 
<script>
  import { FileUploaderItem } from "carbon-components-svelte";
</script>

<FileUploaderItem name="README.md" status="uploading" />

Item (complete)

README.md

<script>
  import { FileUploaderItem } from "carbon-components-svelte";
</script>

<FileUploaderItem name="README.md" status="complete" />

Item (invalid)

README.md

<script>
  import { FileUploaderItem } from "carbon-components-svelte";
</script>

<FileUploaderItem invalid name="README.md" status="edit" />

Drop container

<script>
  import { FileUploaderDropContainer } from "carbon-components-svelte";
</script>

<FileUploaderDropContainer
  labelText="Drag and drop files here or click to upload"
  multiple
/>

Skeleton

<script>
  import { FileUploaderSkeleton } from "carbon-components-svelte";
</script>

<FileUploaderSkeleton />
Table of Contents