Skip to main content

​
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

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

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

Build docs developers (and LLMs) love

Get started for freeTalk to us