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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

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

Preview Code

Copy

<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>