# File Uploader

## Visual Structure

```
ga-file-uploader [--disabled]
  ├── ga-file-uploader__heading (optional)
  │    ├── ga-file-uploader__heading-label
  │    └── ga-file-uploader__heading-description
  ├── ga-button (default variant)
  ├── ga-file-uploader__dropzone (drag-and-drop variant)
  │    └── ga-file-uploader__input
  └── ga-file-uploader__file-list (optional)
       └── ga-file-uploader__file-item [--uploaded|--success|--error]
            ├── [filename text]
            ├── ga-file-uploader__file-action
            │    └── ga-file-uploader__file-icon
            ├── ga-file-uploader__error-file (error state)
            │    └── ga-file-uploader__file-action
            │         └── ga-file-uploader__file-icon
            └── ga-file-uploader__error-callout (error state)
                 └── ga-file-uploader__error-callout-icon
```

## Elements Hierarchy

### Core Block

- `ga-file-uploader` - Main container for the file uploader component

### Optional Elements

- `ga-file-uploader__heading` - Heading container for upload title and helper text
- `ga-file-uploader__heading-label` - Heading label text
- `ga-file-uploader__heading-description` - Heading description text
- `ga-file-uploader__dropzone` - Drag-and-drop upload area, commonly used on a `<label>` with a nested file input
- `ga-file-uploader__input` - Native `type="file"` input for the drag-and-drop variant
- `ga-file-uploader__file-list` - Container for uploaded file items
- `ga-file-uploader__file-item` - Single uploaded file row
- `ga-file-uploader__file-action` - Button element for actionable file item icons
- `ga-file-uploader__file-icon` - Icon inside a file item or file action
- `ga-file-uploader__error-file` - Wrapper for file name and action in the error state
- `ga-file-uploader__error-callout` - Error message container
- `ga-file-uploader__error-callout-icon` - Icon displayed in the error callout

### State Modifiers

- `ga-file-uploader--disabled` - Styles the uploader as disabled
- `ga-file-uploader__dropzone--drag-hover` - Styles the dropzone when a file is dragged over it
- `ga-file-uploader__dropzone--disabled` - Disabled styling for label-based dropzones
- `ga-file-uploader__file-item--uploaded` - Uploaded file item state
- `ga-file-uploader__file-item--success` - Successful upload file item state
- `ga-file-uploader__file-item--error` - Error file item state

For the loading state, compose with the [Loader](?path=/docs/molecules-loader--docs) component (`ga-loader ga-loader--small`) in place of the file icon.

## Examples

### Default

### Disabled

### Drag and Drop

### Drag and Drop Hover

### Drag and Drop Disabled