import { ArgTypes, Meta, Canvas } from '@storybook/addon-docs/blocks';
import * as FileUploaderStories from './FileUploader.stories.js';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Meta isTemplate />

# FileUploader

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

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## 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)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

<Canvas
  of={FileUploaderStories.Default}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(FileUploaderStories.Default),
    },
  ]}
/>

## Drag And Drop

#### Drag And Drop Upload Container Example Application

<Canvas
  of={FileUploaderStories.DragAndDropUploadContainerExampleApplication}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(FileUploaderStories.DragAndDropUploadContainerExampleApplication),
    },
  ]}
/>

#### Drag And Drop Upload Single Container Example Application
<Canvas
  of={FileUploaderStories.DragAndDropUploadSingleContainerExampleApplication}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(FileUploaderStories.DragAndDropUploadSingleContainerExampleApplication),
    },
  ]}
/>

## File 

#### File Uploader Drop Container

<Canvas
  of={FileUploaderStories._FileUploaderDropContainer}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(FileUploaderStories._FileUploaderDropContainer),
    },
  ]}
/>

#### File Uploader Item

<Canvas
  of={FileUploaderStories._FileUploaderItem}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(FileUploaderStories._FileUploaderItem),
    },
  ]}
/>

## Skeleton state
<Canvas
  of={FileUploaderStories.Skeleton}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(FileUploaderStories.Skeleton),
    },
  ]}
/>

## Component API

<ArgTypes />

## 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/react/src/components/FileUploader/FileUploader.mdx).
