GlassFileUpload Component — AuraGlass by AuraOne

Documentation menu · Input

#Overview

Loading preview

Status

live

#Install and Import

Install the package once, import the component from the public entry, and load styles a single time at the app root.

shell

npm install aura-glass

import

import { GlassFileUpload } from 'aura-glass'

styles

import 'aura-glass/styles';

#Examples

Three baseline shapes flagship components use across docs and AI-agent guidance:

Basic

tsx

import { GlassFileUpload } from 'aura-glass';
import 'aura-glass/styles';

export function UploadExample() {
  return (
    <GlassFileUpload
      contained
      compact
      showActions
      defaultFiles={[]}
    />
  );
}

Production

tsx

import { GlassFileUpload, GlassCard } from 'aura-glass';
import 'aura-glass/styles';

export function GlassFileUploadSurface() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <GlassFileUpload
        aria-label="Input production surface"
      />
    </GlassCard>
  );
}

Contained

tsx

import { GlassFileUpload, GlassCard } from 'aura-glass';
import 'aura-glass/styles';

export function GlassFileUploadContainedPreview() {
  return (
    <GlassCard style={{ maxWidth: 420 }}>
      <GlassFileUpload />
    </GlassCard>
  );
}

#Accessibility

Label the dropzone, expose selected files as text, and provide keyboard-accessible remove and retry actions.

#SSR and Performance

Do not process large files on every render. Keep previews bounded and move uploads to app-owned handlers.

#Theming

Theme with public props, `className`, `style`, and AuraGlass CSS variables. Avoid private DOM selectors so the component can upgrade with the package.