import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { cdnJs } from '../../globals/internal/storybook-cdn';
import * as FileUploaderStories from './file-uploader.stories';

<Meta of={FileUploaderStories} />

# File uploader

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/file-uploader)
&nbsp;|&nbsp;
[Usage guidelines](https://www.carbondesignsystem.com/components/file-uploader/usage)
&nbsp;|&nbsp;
[Accessibility](https://www.carbondesignsystem.com/components/file-uploader/accessibility)

## Table of Contents

- [Overview](#overview)
- [Drag And Drop](#drag-and-drop)
  - [Drag And Drop Upload Container Example Application](#drag-and-drop-upload-container-example-application)
  - [Drag And Drop Upload Single Container Example Application](#drag-and-drop-upload-single-container-example-application)
- [File](#file)
  - [File Uploader Drop Container](#file-uploader-drop-container)
  - [File Uploader Item](#file-uploader-item)
- [Skeleton state](#skeleton-state)
- [Component API](#component-api)
- [CDN](#cdn)
- [Feedback](#feedback)

## Overview

<Canvas of={FileUploaderStories.Default} />

## Drag And Drop

#### Drag And Drop Upload Container Example Application

<Canvas of={FileUploaderStories.DragAndDropUploadContainerExampleApplication} />

#### Drag And Drop Upload Single Container Example Application

<Canvas
  of={FileUploaderStories.DragAndDropUploadSingleContainerExampleApplication}

/>

## File

#### File Uploader Drop Container

<Canvas of={FileUploaderStories.FileUploaderDropContainer} />

#### File Uploader Item

<Canvas of={FileUploaderStories.FileUploaderItem} />

## Skeleton state

<Canvas of={FileUploaderStories.Skeleton} />

## Component API

## `cds-file-uploader`

<ArgTypes of="cds-file-uploader" />

## `cds-file-uploader-drop-container`

<ArgTypes of="cds-file-uploader-drop-container" />

## `cds-file-uploader-button`

<ArgTypes of="cds-file-uploader-button" />

## `cds-file-uploader-item`

<ArgTypes of="cds-file-uploader-item" />

<Markdown>{`${cdnJs({ components: ['file-uploader'] })}`}</Markdown>

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/file-uploader/file-uploader.mdx).
