ars-image-upload

About

Accepts image files via drag-and-drop or file picker. Renders preview thumbnails with remove actions. Supports multiple files, max file limits, size validation, and custom accept types.

Single File (default)

<ars-image-upload></ars-image-upload>

Multiple Files

<ars-image-upload multiple max-files="4"></ars-image-upload>

Custom Hint

Only JPG and PNG, max 2 photos

<ars-image-upload max-files="2" accept="image/jpeg,image/png">
  <span slot="hint">Only JPG and PNG, max 2 photos</span>
</ars-image-upload>

Event Monitor

Upload a tiny file (max 1KB) to test errors

[ready] Upload or drop images to see events...

JavaScript API

const files = uploader.getFiles();
uploader.clear();

Theme Toggle

Usage

<ars-image-upload
  id="uploader"
  multiple
  max-files="5"
  max-size="5242880"
  accept="image/*"
>
  <span slot="hint">Max 5 images, 5MB each</span>
</ars-image-upload>

<script>
  const uploader = document.getElementById('uploader');
  uploader.addEventListener('ars-image-upload:change', (e) => {
    console.log('Files:', e.detail.files);
  });
  uploader.addEventListener('ars-image-upload:error', (e) => {
    console.log('Error:', e.detail.reason);
  });
</script>