File Upload

<FileUpload>TailwindCSS Modules

Collect files with a dropzone, file previews, progress indicators, and retry actions. Configure accepted file types, size limits, and selection counts while keeping upload state under your application's control.

InstallationColoxo CLI
npx coloxo add file-upload --style coloxo-css
ES Module ImportPlayground / npm package
import { FileUpload } from '@coloxo/ui';

Design Tokens:

--cx-brand-600: #2348FF--cx-color-border-secondary--cx-radius-xlprogress: bar / fill

1. Variant Matrix

Both progress variants share the same dropzone and validation behavior. Choose files or drop them into an enabled area to try the local upload simulation.

VariantDefaultInvalidDisabled
bar
or drag and drop

Any file type / max. 5 MB

or drag and drop

Attach a supporting document

or drag and drop

Uploads are unavailable

fill
or drag and drop

Any file type / max. 5 MB

or drag and drop

Attach a supporting document

or drag and drop

Uploads are unavailable

2. File states & progress

Use progress and status to represent active uploads, completed files, and failures. The application supplies upload progress and handles retry requests.

Progress variants

progressVariant="bar"DEFAULT

  • Project brief.pdf

    240 KB

    Uploading...
    40%

  • Brand assets.zip

    1 MB

    Complete
    100%

  • Requirements.docx

    117 KB

    Failed
progressVariant="fill"

  • Project brief.pdf

    240 KB

    40%

  • Brand assets.zip

    1 MB

    100%

  • Requirements.docx

    Upload failed, please try again

File type icons

.pdf

.docx

.png

.mp4

.zip

.tsx

3. File types & limits

Set clear expectations before selection. Unsupported types are rejected; oversized files appear as failed entries. Remove an oversized file and choose a smaller one.

Selection constraints

Images only
or drag and drop

Images / max. 2 MB

Image selections show a local thumbnail.

Single document
or drag and drop

One PDF document

Remove the existing file to replace it.

File count
or drag and drop

Any file type / up to 3 files

Additional files are ignored at the limit.

4. Interactive Props Configurator

Visual Render CanvasPROGRESS: BAR | MULTIPLE
or drag and drop

Any file type / max. 5 MB per file / up to 5 files

0 files selected. Uploads are simulated locally.

tsx
const [files, setFiles] = useState<UploadFile[]>([]);<FileUpload  label="Project files"  hint="Any file type / max. 5 MB per file / up to 5 files"  progressVariant="bar"  maxSize={5 * 1024 * 1024}  maxFiles={5}  files={files}  onFilesChange={setFiles}  onRetry={handleRetry}/>

5. Dark theme

Dropzones, file icons, and progress indicators use the shared theme tokens for dark forms and dashboards.

bar
or drag and drop

Any file type / max. 5 MB

  • Project brief.pdf

    240 KB

    Uploading...
    65%
fill
or drag and drop

Any file type / max. 5 MB

  • Project brief.pdf

    240 KB

    65%

6. Enterprise layout compositions

Pair file selection with clear requirements in project and support workflows.

Project handover

Collect the documents your team needs to get started.

or drag and drop

PDF, DOC or DOCX / max. 10 MB / up to 5 files

Support request

Attach screenshots that help explain the issue.

or drag and drop

Images / max. 5 MB / up to 3 files

Accessibility

Keyboard selection

Tab to Click to upload and press Enter or Space to open the native file chooser. Drag and drop is an additional way to select files.

Clear feedback

Keep accepted formats and size limits visible in the hint. File rows show names and progress values; failed uploads include a text status.

File actions

Delete buttons include the file name in their accessible label. Retry actions are keyboard accessible and call onRetry for the selected file.

Props

NameTypeDefaultDescription
progressVariant"bar" | "fill"barList item progress style.
label / description / errorReactNode—Field label, supporting text, and validation message.
required / optionalboolean—Display the required or optional field indicator.
filesUploadFile[]—Controlled file list with id, native file or name/size, thumbnailUrl, progress, status, and failure details.
onFilesChange(files: UploadFile[]) => void—Receives the updated list after selection or deletion. New accepted files start queued; the application performs uploads and supplies progress.
hintReactNode—Constraints line under the CTA.
acceptstring—Accept attribute (extensions or MIME).
maxSizenumber—Max bytes per file.
maxFilesnumber—Maximum number of entries. Additional files are ignored when the limit is reached.
multiplebooleantrueAllow more than one file.
disabledboolean—Disable dropzone.
onRetry(file: UploadFile) => void—Retry failed upload.