File Upload — ARC UI

Components

File Upload

input

interactive

<arc-file-upload>

Overview

Guidelines

When to use

Set the accept attribute to restrict file types and communicate expectations (e.g., accept="image/*")
Set max-size to prevent oversized uploads before they reach the server
Use the multiple attribute when the use case requires batch uploads (e.g., photo galleries)
Listen to arc-change to sync the file list with your form state or upload handler
Display the upload zone at a reasonable width so the hint text and file list are readable

When not to use

Use FileUpload as a general file manager -- it handles selection, not uploading or progress
Set max-size to 0 and expect it to enforce a limit; 0 means no limit
Forget to handle the arc-change event -- without it, selected files are not captured by your application
Place FileUpload inside a container with overflow: hidden, as the error message may be clipped
Disable the component without explaining why uploads are unavailable

Features

Drag-and-drop zone with visual feedback (border color and background change) during drag-over
Click-to-browse fallback that opens the native file picker dialog
File type filtering via the accept attribute (e.g., "image/*", ".pdf,.docx")
Maximum file size validation with automatic rejection and inline error message
Multiple file selection mode that appends files across interactions
Styled file list showing name, formatted size, and a remove button per file
arc-change event on every file list mutation and arc-remove event on individual file removal
Keyboard accessible: Enter and Space activate the file picker from the focused dropzone

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-file-upload id="uploader" accept="image/*" multiple></arc-file-upload>

<script>
  const uploader = document.getElementById('uploader');

  uploader.addEventListener('arc-change', (e) => {
    const files = e.detail.value;
    files.forEach(file => {
      console.log(file.name, file.size, file.type);
    });

    // Example: upload via FormData
    const form = new FormData();
    files.forEach(f => form.append('files', f));
    fetch('/api/upload', { method: 'POST', body: form });
  });

  uploader.addEventListener('arc-remove', (e) => {
    console.log('Removed:', e.detail.value.name);
  });
</script>

import { FileUpload } from '@arclux/arc-ui-react';

function Upload() {
  function handleChange(e) {
    const files = e.detail.value;
    const form = new FormData();
    files.forEach(f => form.append('files', f));
    fetch('/api/upload', { method: 'POST', body: form });
  }

  return (
    <FileUpload
      accept="image/*"
      multiple
      onArcChange={handleChange}
    />
  );
}

<script setup>
import { FileUpload } from '@arclux/arc-ui-vue';
</script>

<template>
  <FileUpload accept="image/*" multiple></FileUpload>
</template>

<script>
  import { FileUpload } from '@arclux/arc-ui-svelte';
</script>

<FileUpload accept="image/*" multiple></FileUpload>

import { Component } from '@angular/core';
import { FileUpload } from '@arclux/arc-ui-angular';

@Component({
  imports: [FileUpload],
  template: `
    <FileUpload accept="image/*" multiple></FileUpload>
  `,
})
export class MyComponent {}

import { FileUpload } from '@arclux/arc-ui-solid';

<FileUpload accept="image/*" multiple></FileUpload>

import { FileUpload } from '@arclux/arc-ui-preact';

<FileUpload accept="image/*" multiple></FileUpload>

API

Prop	Type	Default	Description
`accept`	`string`	`''`	Comma-separated list of accepted file types, passed directly to the native file input accept attribute. Examples: "image/*", ".pdf,.docx", "audio/mp3".
`multiple`	`boolean`	`false`	When true, allows selecting multiple files. Each drop or browse interaction appends to the existing file list rather than replacing it.
`max-size`	`number`	`0`	Maximum file size in bytes. Files exceeding this limit are rejected with an inline error message. Set to 0 for no limit.
`disabled`	`boolean`	`false`	Disables the dropzone, preventing drag-and-drop and click interactions. Reduces opacity to 0.4.

Events

Event	Description
`arc-change`	Fired when files are added or dropped
`arc-remove`	Fired when a file is removed from the list

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight