import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import FileUploaderBasic from "examples/file-uploader/basic.tsx";
import FileUploaderError from "examples/file-uploader/error.tsx";
import FileUploaderIndeterminate from "examples/file-uploader/indeterminate-progress.tsx";
import FileUploaderDisabled from "examples/file-uploader/disabled.tsx";
import FileUploaderOverrides from "examples/file-uploader/overrides.tsx";

import OverridesExample from "examples/file-uploader/_overrides_component.tsx";
import * as FileUploaderExports from "baseui/file-uploader";

import Yard from "../../components/yard/index";
import fileUploaderYardConfig from "../../components/yard/config/file-uploader";

export default Layout;

# File Uploader

<Yard placeholderHeight={180} {...fileUploaderYardConfig} />

Creates a dropzone for file uploads.

## Accessibility

- "Browse files" has `aria-controls="fileupload"` set.

## When to use

- Enable file(s) upload through drag and drop or the system _Browse files_ dialog.

## Security considerations

By default, the file uploader does not concern itself with validating and discarding potentially malicious files, as Base Web never runs any of the uploaded files. **It's the responsibility of the consuming application to do so.** To help with that, this component supports the `accept` property, which can limit the acceptable file extensions.

To learn more, read the corresponding [OWASP article on file uploads](https://www.owasp.org/index.php/Unrestricted_File_Upload).

## Examples

<Example title="File uploader basic usage" path="file-uploader/basic.tsx">
  <FileUploaderBasic />
</Example>

<Example title="File upload with error" path="file-uploader/error.tsx">
  <FileUploaderError />
</Example>

<Example
  title="File upload with unknown progress"
  path="file-uploader/indeterminate-progress.tsx"
>
  <FileUploaderIndeterminate />
</Example>

<Example
  title="File uploader in disabled state"
  path="file-uploader/disabled.tsx"
>
  <FileUploaderDisabled />
</Example>

<Example
  title="File uploader with overrides"
  path="file-uploader/overrides.tsx"
>
  <FileUploaderOverrides />
</Example>

<Exports
  component={FileUploaderExports}
  title="File uploader exports"
  path="baseui/file-uploader"
/>