UI.BlueStack.io - Component Library

file-upload Component

File Upload Area

A comprehensive file upload component with drag & drop support, progress tracking, and multiple file handling. Supports JPEG, PNG, PDF, and MP4 formats up to 50 MB.

Basic Upload Area

Choose a file or drag & drop it here

JPEG, PNG, PDF, and MP4 formats, up to 50 MB.

<div class="file-upload-area">
                <i class="icon upload-cloud w-6 h-6"></i>
                <div class="content">
                    <h4 class="title">Choose a file or drag & drop it here</h4>
                    <p class="description">JPEG, PNG, PDF, and MP4 formats, up to 50 MB.</p>
                </div>
                <button class="button small neutral">Browse File</button>
                <input type="file" class="file-input" multiple accept=".jpg,.jpeg,.png,.pdf,.mp4">
            </div>

Upload Area States

Release to upload

Your files will be uploaded

Upload disabled

File upload is currently unavailable

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                
                <div class="file-upload-area hover">
                    <i class="icon upload-cloud w-6 h-6"></i>
                    <div class="content">
                        <h4 class="title">Release to upload</h4>
                        <p class="description">Your files will be uploaded</p>
                    </div>
                </div>

                
                <div class="file-upload-area disabled">
                    <i class="icon upload-cloud w-6 h-6"></i>
                    <div class="content">
                        <h4 class="title">Upload disabled</h4>
                        <p class="description">File upload is currently unavailable</p>
                    </div>
                </div>
            </div>

Multiple Files Upload

Drop multiple files here

You can upload up to 10 files at once

<div class="file-upload-area multiple">
                <i class="icon file-plus w-8 h-8"></i>
                <div class="content">
                    <h4 class="title">Drop multiple files here</h4>
                    <p class="description">You can upload up to 10 files at once</p>
                </div>
                <button class="button small primary">Select Files</button>
                <input type="file" class="file-input" multiple>
            </div>
            
            
            <div class="selected-files-info hidden">
                <span class="files-count">0 files selected</span>
                <button class="clear-btn">Clear all</button>
            </div>

File Upload Cards

Uploaded Files - Success

PDF

google-certificate.pdf

94 KB • Completed

<div class="file-upload-list">
                <div class="file-upload-card success">
                    <div class="file-icon pdf">
                        <span class="format">PDF</span>
                    </div>
                    <div class="content">
                        <h5 class="title">google-certificate.pdf</h5>
                        <div class="meta">
                            <span class="size">94 KB</span>
                            <span class="separator">•</span>
                            <span class="status">
                                <i class="icon circle-check w-3 h-3 text-green-600"></i>
                                Completed
                            </span>
                        </div>
                    </div>
                    <button class="delete-btn" aria-label="Delete file">
                        <i class="icon trash-2 w-4 h-4"></i>
                    </button>
                </div>
            </div>

Uploading Progress

DOC

project-proposal.docx

2.1 MB of 5.4 MB • Uploading...

<div class="file-upload-list">
                <div class="file-upload-card uploading">
                    <div class="file-icon doc">
                        <span class="format">DOC</span>
                    </div>
                    <div class="content">
                        <h5 class="title">project-proposal.docx</h5>
                        <div class="meta">
                            <span class="size">2.1 MB of 5.4 MB</span>
                            <span class="separator">•</span>
                            <span class="status">Uploading...</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 39%"></div>
                        </div>
                    </div>
                    <button class="delete-btn" aria-label="Cancel upload">
                        <i class="icon x w-4 h-4"></i>
                    </button>
                </div>
            </div>

Upload Error

JPG

vacation-photo.jpg

File too large • Failed

<div class="file-upload-list">
                <div class="file-upload-card error">
                    <div class="file-icon img">
                        <span class="format">JPG</span>
                    </div>
                    <div class="content">
                        <h5 class="title">vacation-photo.jpg</h5>
                        <div class="meta">
                            <span class="size">File too large</span>
                            <span class="separator">•</span>
                            <span class="status">
                                <i class="icon circle-x w-3 h-3 text-red-600"></i>
                                Failed
                            </span>
                        </div>
                    </div>
                    <button class="delete-btn" aria-label="Remove file">
                        <i class="icon trash-2 w-4 h-4"></i>
                    </button>
                </div>
            </div>

Multiple Files

PDF

report-2024.pdf

1.2 MB • Completed

XLS

financial-data.xlsx

450 KB • Completed

MP4

presentation-video.mp4

12.3 MB of 45.2 MB • Uploading...

<div class="file-upload-list">
                <div class="file-upload-card success">
                    <div class="file-icon pdf">
                        <span class="format">PDF</span>
                    </div>
                    <div class="content">
                        <h5 class="title">report-2024.pdf</h5>
                        <div class="meta">
                            <span class="size">1.2 MB</span>
                            <span class="separator">•</span>
                            <span class="status">
                                <i class="icon circle-check w-3 h-3 text-green-600"></i>
                                Completed
                            </span>
                        </div>
                    </div>
                    <button class="delete-btn" aria-label="Delete file">
                        <i class="icon trash-2 w-4 h-4"></i>
                    </button>
                </div>
                <div class="file-upload-card success">
                    <div class="file-icon xls">
                        <span class="format">XLS</span>
                    </div>
                    <div class="content">
                        <h5 class="title">financial-data.xlsx</h5>
                        <div class="meta">
                            <span class="size">450 KB</span>
                            <span class="separator">•</span>
                            <span class="status">
                                <i class="icon circle-check w-3 h-3 text-green-600"></i>
                                Completed
                            </span>
                        </div>
                    </div>
                    <button class="delete-btn" aria-label="Delete file">
                        <i class="icon trash-2 w-4 h-4"></i>
                    </button>
                </div>
                <div class="file-upload-card uploading">
                    <div class="file-icon mp4">
                        <span class="format">MP4</span>
                    </div>
                    <div class="content">
                        <h5 class="title">presentation-video.mp4</h5>
                        <div class="meta">
                            <span class="size">12.3 MB of 45.2 MB</span>
                            <span class="separator">•</span>
                            <span class="status">Uploading...</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 27%"></div>
                        </div>
                    </div>
                    <button class="delete-btn" aria-label="Cancel upload">
                        <i class="icon x w-4 h-4"></i>
                    </button>
                </div>
            </div>

<div class="file-upload-list">
                <div class="file-upload-card success">
                    <div class="file-icon pdf">
                        <span class="format">PDF</span>
                    </div>
                    <div class="content">
                        <h5 class="title">report-2024.pdf</h5>
                        <div class="meta">
                            <span class="size">1.2 MB</span>
                            <span class="separator">•</span>
                            <span class="status">
                                <i class="icon circle-check w-3 h-3 text-green-600"></i>
                                Completed
                            </span>
                        </div>
                    </div>
                    <button class="delete-btn" aria-label="Delete file">
                        <i class="icon trash-2 w-4 h-4"></i>
                    </button>
                </div>
                <div class="file-upload-card success">
                    <div class="file-icon xls">
                        <span class="format">XLS</span>
                    </div>
                    <div class="content">
                        <h5 class="title">financial-data.xlsx</h5>
                        <div class="meta">
                            <span class="size">450 KB</span>
                            <span class="separator">•</span>
                            <span class="status">
                                <i class="icon circle-check w-3 h-3 text-green-600"></i>
                                Completed
                            </span>
                        </div>
                    </div>
                    <button class="delete-btn" aria-label="Delete file">
                        <i class="icon trash-2 w-4 h-4"></i>
                    </button>
                </div>
                <div class="file-upload-card uploading">
                    <div class="file-icon mp4">
                        <span class="format">MP4</span>
                    </div>
                    <div class="content">
                        <h5 class="title">presentation-video.mp4</h5>
                        <div class="meta">
                            <span class="size">12.3 MB of 45.2 MB</span>
                            <span class="separator">•</span>
                            <span class="status">Uploading...</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 27%"></div>
                        </div>
                    </div>
                    <button class="delete-btn" aria-label="Cancel upload">
                        <i class="icon x w-4 h-4"></i>
                    </button>
                </div>
            </div>

Size Variations

Tiny Size

Drop files here

Max 50 MB

<div class="file-uploads tiny">
                <div class="file-upload-area">
                    <i class="icon upload-cloud w-5 h-5"></i>
                    <div class="content">
                        <h4 class="title text-xs">Drop files here</h4>
                        <p class="description text-xs">Max 50 MB</p>
                    </div>
                    <button class="button tiny">Browse</button>
                    <input type="file" class="file-input" multiple>
                </div>
            </div>

Small Size

Choose files to upload

JPEG, PNG, PDF, MP4

<div class="file-uploads small">
                <div class="file-upload-area">
                    <i class="icon upload-cloud w-6 h-6"></i>
                    <div class="content">
                        <h4 class="title text-sm">Choose files to upload</h4>
                        <p class="description text-xs">JPEG, PNG, PDF, MP4</p>
                    </div>
                    <button class="button small">Select Files</button>
                    <input type="file" class="file-input" multiple>
                </div>
            </div>

Large Size

Drag and drop your files here

Supports multiple file formats up to 50 MB each

<div class="file-uploads large">
                <div class="file-upload-area">
                    <i class="icon upload-cloud w-8 h-8"></i>
                    <div class="content">
                        <h4 class="title text-lg">Drag and drop your files here</h4>
                        <p class="description">Supports multiple file formats up to 50 MB each</p>
                    </div>
                    <button class="button large">Choose Files</button>
                    <input type="file" class="file-input" multiple>
                </div>
            </div>

Common Patterns

Inline Upload Button

<div class="flex items-center gap-4">
                <button class="button">
                    <i class="icon upload w-4 h-4"></i>
                    Upload Document
                </button>
                
                <button class="button primary">
                    <i class="icon file-plus w-4 h-4"></i>
                    Add Files
                </button>
                
                <button class="button outline">
                    <i class="icon paperclip w-4 h-4"></i>
                    Attach
                </button>
            </div>