FILE UPLOAD: Multi-variant file uploader with progress and state feedback
VARIANTS: Inline Button | Drop Zone | Avatar
STATES: Uploading | Complete | Error | Invalid
Allows users to upload single or multiple files. The inline button variant uses
.btn .btn-secondary as the trigger. Drop zone supports click and drag-and-drop.
Avatar variant provides circular image upload with preview. All variants compose existing
.progress bars for upload feedback.
Inline Button Upload
Inline: A .btn .btn-secondary trigger with a file list below.
Pre-loaded files show as completed items with remove buttons. Click the button to add more files.
school-report-2025.pdf
passport-scan.jpg
<div class="tw-file-upload" data-controller="file-upload"><button class="tw-btn tw-btn-secondary">Upload</button><div class="tw-file-upload-list">...</div></div>
Drop Zone
Drop zone: A large dashed-border area where users can click or drag-and-drop files. Shows an icon, instruction text, and format hint. Files appear in a list below the zone.
Empty
Click or drag files to this area to upload
Support for single or bulk upload. PDF, DOC, JPG, or PNG — max 10 MB per file.
With uploaded file
Click or drag files to this area to upload
Support for single or bulk upload. PDF, DOC, JPG, or PNG — max 10 MB per file.
admissions-form-2026.pdf
<div class="tw-file-upload-dropzone" role="button" tabindex="0">...</div>
Avatar Upload
Avatar: Circular upload area for profile pictures. Shows a placeholder icon when empty and a camera overlay on hover. Pre-loaded variant displays the uploaded image with an edit overlay.
Empty
Pre-loaded
Small
Large
<div class="tw-file-upload-avatar" role="button" tabindex="0">...</div>
Upload States
States: File items reflect upload progress. Uploading shows a progress bar, Complete shows a green check, Error shows a red icon with retry option, and Invalid shows an orange warning for validation issues.
Uploading
application-form.pdf
Complete
transcript-2025.pdf
Error
photo-id-scan.jpg
Invalid
design-mockup.psd
.file-upload-item-uploading | .file-upload-item-complete | .file-upload-item-error | .file-upload-item-invalid
Disabled State
Disabled: Add .file-upload-disabled to the wrapper to gray out
and disable all interactions. Pointer events are blocked and opacity is reduced.
Disabled inline button
school-report-2025.pdf
Disabled drop zone
Click or drag files to this area to upload
Support for single or bulk upload. PDF, DOC, JPG, or PNG — max 10 MB per file.
Disabled avatar
<div class="tw-file-upload tw-file-upload-disabled">...</div>