FileUploaderMinimal

Compact file uploader with minimal UI, perfect for space-constrained layouts

Overview

The FileUploaderMinimal component provides a streamlined file upload experience with a minimal UI footprint. It combines an inline drop area with modal dialogs for additional sources, offering the best of both worlds - compact design with full functionality.

When to use

Use FileUploaderMinimal when you need:

• A compact upload interface that takes minimal space
• Simple drag-and-drop with a “Choose file” button
• Full upload sources available through modals when needed
• Image-centric workflows with grid or list view
• Quick file selection without overwhelming the UI

Basic usage

CDN

<script type="module">
  import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-minimal.min.js';
  UC.defineComponents(UC);
</script>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-minimal.min.css"
/>

<uc-file-uploader-minimal ctx-name="my-uploader"></uc-file-uploader-minimal>
<uc-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>

Features

Minimal drop area

The component starts with a compact drop area showing a “Choose file” button:

<uc-file-uploader-minimal ctx-name="my-uploader"></uc-file-uploader-minimal>
<uc-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
></uc-config>

Automatic view transitions

The uploader intelligently switches between views:

1. Drop area - Initial state with “Choose file” button
2. Upload list - Automatically shown when files are added
3. Modal sources - Opens modals for camera, URL, or external sources

Instant upload mode

By default, FileUploaderMinimal has confirm-upload set to false, meaning files upload immediately upon selection. The upload list is shown as soon as files are added.

File view modes

Supports two view modes through configuration:

• Grid view (default) - Display files as thumbnails in a grid
• List view - Display files in a vertical list

<uc-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
  files-view-mode="grid"
></uc-config>

Attributes

ctx-name

ctx-name · string · required

The context name that links the uploader with its configuration. Must match the ctx-name in uc-config.

Configuration options

Common configurations for FileUploaderMinimal:

Image gallery

<uc-file-uploader-minimal ctx-name="my-uploader"></uc-file-uploader-minimal>
<uc-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
  img-only
  group-output
  files-view-mode="grid"
></uc-config>

Single file

<uc-file-uploader-minimal ctx-name="my-uploader"></uc-file-uploader-minimal>
<uc-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
  multiple="false"
></uc-config>

In single file mode with grid view, the component automatically adjusts to show only one column.

With validation

<uc-file-uploader-minimal ctx-name="my-uploader"></uc-file-uploader-minimal>
<uc-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
  img-only
  max-local-file-size-bytes="10485760"
  multiple-max="5"
></uc-config>

View mode behavior

Grid view

Optimal for image uploads with thumbnail previews:

<uc-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
  files-view-mode="grid"
></uc-config>

Features:

• Thumbnail previews for images
• Responsive grid layout
• Edit and remove buttons on hover
• Automatically switches to single column when multiple="false"

List view

Better for files with detailed information:

<uc-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
  files-view-mode="list"
></uc-config>

Features:

• File names and sizes
• Upload progress bars
• Action buttons aligned

Modal integration

Clicking the drop area or choosing alternative sources opens modal dialogs:

• Start From Modal - Full source list (camera, URL, external services)
• Camera Modal - Photo and video capture interface
• URL Modal - Import files from URLs
• External Modal - Connect to Dropbox, Google Drive, etc.
• Image Editor Modal - Edit images before upload

Styling

Customize the minimal uploader appearance:

<style>
  uc-file-uploader-minimal {
    --uc-grid-col: 3; /* Grid columns */
    max-width: 600px;
  }
</style>

Theme classes

<uc-file-uploader-minimal class="uc-light" ctx-name="my-uploader"></uc-file-uploader-minimal>

Mode attribute

The component automatically sets a mode attribute based on the configured view mode:

<!-- Automatically added based on config -->
<uc-file-uploader-minimal mode="grid" ctx-name="my-uploader"></uc-file-uploader-minimal>

You can use this for custom styling:

uc-file-uploader-minimal[mode="grid"] {
  /* Grid-specific styles */
}

uc-file-uploader-minimal[mode="list"] {
  /* List-specific styles */
}

Upload workflow

1. File selection

   User clicks “Choose file” or drags files to the drop area

2. Immediate upload

   Files begin uploading automatically (no confirmation required)

3. Progress display

   Upload list appears showing progress for each file

4. Edit or remove

   Users can edit images or remove files during or after upload

Events

Handle upload events in your application:

const uploader = document.querySelector('uc-file-uploader-minimal');

uploader.addEventListener('file-upload-success', (e) => {
  console.log('File uploaded:', e.detail);
});

uploader.addEventListener('file-added', (e) => {
  console.log('File added to queue:', e.detail);
});

uploader.addEventListener('file-removed', (e) => {
  console.log('File removed:', e.detail);
});

Comparison with other solutions

FileUploaderRegular

Full-featured with upload button and comprehensive modal workflows

FileUploaderInline

Inline interface without modals, shows all activities in-place

Use cases

• Image galleries - Compact interface for uploading multiple images
• Avatar uploads - Single image selection with minimal UI
• Form attachments - Add files without disrupting form layout
• Product images - E-commerce product photo uploads
• Document uploads - Simple file selection for document management

Remember that FileUploaderMinimal disables upload confirmation by default. If you need users to review files before uploading, use FileUploaderRegular or FileUploaderInline instead.

Related components

• Config - Configure uploader behavior
• CloudImageEditor - Standalone image editor