# DropzoneFilename

## Description

A text component that displays the filename of uploaded files in a dropzone. It automatically retrieves file information from the Dropzone context and renders the filename with consistent text styling, supporting multiple files through index selection.

## Aliases

- DropzoneFilename
- FileName
- FileNameDisplay
- UploadedFileName

## Props Breakdown

**Extends:** `Text` component props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `fileIndex` | `number` | `0` | No | Index of the file to display the name for |

Plus all `Text` component props (type, size, weight, color, etc.).

## Examples

### Basic Usage
```tsx
import { Dropzone, DropzoneFilename, DropzoneContent } from '@delightui/components';

function BasicFilenameExample() {
  return (
    <Dropzone>
      <DropzoneContent>
        {({ files }) => (
          <>
            <p>Drop files here</p>
            {files.length > 0 && (
              <div className="file-display">
                <DropzoneFilename />
              </div>
            )}
          </>
        )}
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Multiple Files Display
```tsx
function MultipleFilesExample() {
  return (
    <Dropzone multiple>
      <DropzoneContent>
        {({ files }) => (
          <>
            <p>Drop multiple files here</p>
            {files.length > 0 && (
              <div className="file-list">
                <h4>Uploaded Files:</h4>
                {files.map((_, index) => (
                  <div key={index} className="file-item">
                    <DropzoneFilename 
                      fileIndex={index}
                      type="Body"
                      size="Small"
                    />
                  </div>
                ))}
              </div>
            )}
          </>
        )}
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Styled Filename Display
```tsx
function StyledFilenameExample() {
  return (
    <Dropzone>
      <DropzoneContent>
        {({ files }) => (
          <div className="upload-area">
            <p>Upload your document</p>
            
            {files.length > 0 && (
              <div className="selected-file">
                <Icon icon="Document" size="Small" />
                <DropzoneFilename 
                  type="Body"
                  weight="Medium"
                  color="Primary"
                  className="filename-text"
                />
              </div>
            )}
          </div>
        )}
      </DropzoneContent>
    </Dropzone>
  );
}
```

### File List with Actions
```tsx
import { DropzoneClear, Icon, Button } from '@delightui/components';

function FileListWithActionsExample() {
  return (
    <Dropzone multiple>
      <DropzoneContent>
        {({ files }) => (
          <>
            <div className="upload-prompt">
              <p>Upload files</p>
            </div>
            
            {files.length > 0 && (
              <div className="file-management">
                <div className="file-list">
                  {files.map((_, index) => (
                    <div key={index} className="file-entry">
                      <Icon icon="Document" size="Small" />
                      <DropzoneFilename 
                        fileIndex={index}
                        type="Body"
                        size="Small"
                        className="file-name"
                      />
                      <Button size="Small" type="Ghost">Remove</Button>
                    </div>
                  ))}
                </div>
                
                <div className="file-actions">
                  <DropzoneClear size="Small" />
                  <Button size="Small">Upload All</Button>
                </div>
              </div>
            )}
          </>
        )}
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Truncated Long Filenames
```tsx
function TruncatedFilenameExample() {
  return (
    <Dropzone>
      <DropzoneContent>
        {({ files }) => (
          <>
            <p>Upload file</p>
            
            {files.length > 0 && (
              <div className="file-preview">
                <div className="file-info">
                  <DropzoneFilename 
                    type="Body"
                    size="Small"
                    className="truncated-filename"
                    style={{ 
                      maxWidth: '200px',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap'
                    }}
                  />
                  <Text type="Caption" color="Secondary">
                    {Math.round(files[0]?.size / 1024)} KB
                  </Text>
                </div>
              </div>
            )}
          </>
        )}
      </DropzoneContent>
    </Dropzone>
  );
}
```