## Examples

### Basic file upload


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### With helper text


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Upload complete non editable


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Upload complete editable


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Drag file hover component


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### File upload in form with error


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### File upload loading


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

## Documentation

### Overview

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-file-upload` | `<div>`, `<form>` | Initiates the file upload component. **Required**. |
| `.pf-v6-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
| `.pf-v6-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
| `.pf-v6-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
| `.pf-v6-c-file-upload__helper-text` | `<div>` | Initiates a container for [helper text](/components/helper-text) |
| `.pf-m-drag-hover` | `.pf-v6-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
| `.pf-m-loading` | `.pf-v6-c-file-upload` | Modifies file upload for the loading state. |