# DropzoneTrigger

## Description

A button component that triggers the file selection dialog for a dropzone. It integrates with the Dropzone context to provide a clickable interface for users to browse and select files, serving as an alternative or complement to drag-and-drop functionality.

## Aliases

- DropzoneTrigger
- FileSelectButton
- BrowseButton
- UploadTrigger

## Props Breakdown

**Extends:** `Button` component props

All `Button` component props are supported (size, style, type, appearance, disabled, etc.).

## Examples

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

function BasicTriggerExample() {
  return (
    <Dropzone>
      <DropzoneContent>
        <p>Drag files here or</p>
        <DropzoneTrigger>
          Choose Files
        </DropzoneTrigger>
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Styled Upload Button
```tsx
function StyledTriggerExample() {
  return (
    <Dropzone accept={{ 'image/*': ['.jpg', '.png', '.gif'] }}>
      <DropzoneContent>
        <div className="upload-area">
          <h3>Upload Images</h3>
          <p>Select images from your device</p>
          
          <DropzoneTrigger
            size="Large"
            style="Primary"
            leadingIcon={<Icon icon="Upload" />}
          >
            Browse Images
          </DropzoneTrigger>
        </div>
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Multiple Upload Options
```tsx
function MultipleOptionsExample() {
  return (
    <Dropzone multiple>
      <DropzoneContent>
        {({ files }) => (
          <div className="upload-options">
            <div className="drag-area">
              <p>Drag & drop files here</p>
              <span>or</span>
            </div>
            
            <div className="button-group">
              <DropzoneTrigger
                type="Outlined"
                size="Medium"
              >
                Choose Files
              </DropzoneTrigger>
              
              {files.length > 0 && (
                <Button
                  style="Primary"
                  size="Medium"
                  onClick={() => console.log('Upload files')}
                >
                  Upload {files.length} Files
                </Button>
              )}
            </div>
          </div>
        )}
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Document Upload Interface
```tsx
function DocumentUploadExample() {
  return (
    <Dropzone accept={{ 'application/pdf': ['.pdf'], 'application/msword': ['.doc', '.docx'] }}>
      <DropzoneContent>
        {({ files, isDragActive }) => (
          <div className="document-upload">
            {isDragActive ? (
              <div className="drag-active">
                <p>Drop documents here...</p>
              </div>
            ) : files.length > 0 ? (
              <div className="files-ready">
                <p>{files.length} document(s) selected</p>
                <DropzoneTrigger
                  type="Ghost"
                  size="Small"
                >
                  Choose Different Files
                </DropzoneTrigger>
              </div>
            ) : (
              <div className="upload-prompt">
                <Icon icon="Document" size="Large" />
                <h3>Upload Documents</h3>
                <p>PDF and Word documents supported</p>
                
                <DropzoneTrigger
                  size="Large"
                  style="Primary"
                  leadingIcon={<Icon icon="FolderOpen" />}
                >
                  Select Documents
                </DropzoneTrigger>
              </div>
            )}
          </div>
        )}
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Profile Picture Upload
```tsx
function ProfilePictureExample() {
  return (
    <Dropzone accept={{ 'image/*': ['.jpg', '.jpeg', '.png'] }}>
      <DropzoneContent>
        {({ files }) => (
          <div className="profile-upload">
            <div className="avatar-preview">
              {files.length > 0 ? (
                <img src={URL.createObjectURL(files[0])} alt="Preview" />
              ) : (
                <div className="avatar-placeholder">
                  <Icon icon="Person" size="Large" />
                </div>
              )}
            </div>
            
            <div className="upload-controls">
              <DropzoneTrigger
                size="Medium"
                type="Outlined"
                leadingIcon={<Icon icon="Camera" />}
              >
                {files.length > 0 ? 'Change Photo' : 'Upload Photo'}
              </DropzoneTrigger>
            </div>
          </div>
        )}
      </DropzoneContent>
    </Dropzone>
  );
}
```

### Disabled State
```tsx
function DisabledTriggerExample() {
  const [isUploading, setIsUploading] = useState(false);

  return (
    <Dropzone>
      <DropzoneContent>
        <div className="upload-with-status">
          <p>Upload your files</p>
          
          <DropzoneTrigger
            disabled={isUploading}
            leadingIcon={isUploading ? <Spinner size="Small" /> : <Icon icon="Upload" />}
          >
            {isUploading ? 'Uploading...' : 'Choose Files'}
          </DropzoneTrigger>
          
          {isUploading && (
            <p className="upload-status">Please wait while files are being uploaded...</p>
          )}
        </div>
      </DropzoneContent>
    </Dropzone>
  );
}
```