File upload

Drag-and-drop file selection plus a matching upload-progress display. Aurora ships selection only — actual upload (XHR / fetch / multipart, server endpoint, retry) lives in your app. The dropzone hands you a File object (or array) on selection and gets out of the way.

Five pieces ship from @scaler-tech/aurora/file-upload:

• FileDropzone — outer wrapper with drag-and-drop + click-to-browse. Manages its own selected-file list internally.
• FileDropPlaceholder — default empty-state content (icon, title, description) for the dropzone slot.
• FileList + FileListItem — render a list of files. Used internally by FileDropzone, but you can compose them yourself outside the dropzone.
• FileUploadProgress — replaces the dropzone with a progress display while uploading.

FileDropzone is a fixed-size component — it ships with a 528px height and 384px min height/width by design. The demos below cap the height to fit on the page; in real layouts let it use its default size.

Basic

Drop a file here or click to browse

Accepts any file type

Selected: (none)

<FileDropzone @select="onSelect">
  <FileDropPlaceholder
    title="Drop a file here or click to browse"
    description="Accepts any file type"
  />
</FileDropzone>

The dropzone emits select with a single File (when multiple={false}), an array of Files (when multiple), or null if the user cancels.

Multiple files + MIME filter

Drop files here or click to browse

Images and PDFs

<FileDropzone
  multiple
  mime-types="image/*,application/pdf"
  @select="onSelect"
>
  <FileDropPlaceholder
    title="Drop files here or click to browse"
    description="Images and PDFs"
  />
</FileDropzone>

mime-types accepts the same syntax as the underlying <input accept> attribute — a comma-separated list of MIME types or wildcards (e.g. image/*). See the full MIME type list for reference.

When multiple is enabled, the dropzone deduplicates selections automatically — picking the same file twice doesn't add it twice. It also renders the selected files inline using FileList / FileListItem, with a remove button on each row.

Standalone FileList

FileList and FileListItem are also available outside FileDropzone — useful when you want to display files coming from somewhere else (an API, a draft state, a previous upload).

• annual-report.pdf
• financials-q3.xlsx
• upload-failed.csv

<FileList>
  <FileListItem filename="annual-report.pdf" />
  <FileListItem filename="financials-q3.xlsx" icon="document" />
  <FileListItem filename="upload-failed.csv" error :show-remove-button="false" />
</FileList>

Upload progress

Swap the FileDropzone for FileUploadProgress while the upload is in flight. Both share the same surface chrome so the swap reads as one component changing state.

Uploading…

This may take a few minutes

<FileUploadProgress
  v-if="isUploading"
  title="Uploading…"
  :progress="progress"
  description="This may take a few minutes"
/>

<FileDropzone v-else multiple @select="onSelect">
  <FileDropPlaceholder title="Drop files here" />
</FileDropzone>

progress is a number from 0–100. Aurora doesn't track upload state for you — drive progress from your XHR / fetch progress events.

FileDropzone — Props

Prop	Type	Default	Description
multiple	boolean	false	Allow selecting multiple files. Changes select payload from File to File[].
mimeTypes	string	—	Comma-separated MIME types or wildcards (e.g. 'image/*,application/pdf'). Restricts both the file picker and drag-drop validation.
class	string	—	Additional classes for the outer container. The component has a fixed 528px default height and 384px minimum — override with class="h-* min-h-*".

FileDropzone — Events

Event	Payload	Description
select	File | File[] | null	Emitted when files are selected (via picker or drop). Single File when multiple=false, File[] when multiple, null when the user cancels the picker.

FileDropPlaceholder — Props

Renders the upload icon + title + optional description. Always shows the same icon — it's the default empty state for FileDropzone.

Prop	Type	Default	Description
title	string	required	Bold first line.
description	string	—	Secondary line under the title.

FileListItem — Props

Prop	Type	Default	Description
filename	string	required	Filename to display.
icon	IconName	'document'	Leading icon.
error	boolean	false	Apply error styling (e.g. for failed uploads).
showRemoveButton	boolean	true	Render the trailing remove button.
index	number	—	Optional index — useful when looping with v-for for parent identification.
class	string	—	Additional classes.

FileListItem — Events

Event	Description
remove	Fired when the remove button is clicked. No payload.

FileUploadProgress — Props

Prop	Type	Default	Description
title	string	required	Main title shown above the progress bar.
progress	number	required	Progress percentage (0–100).
description	string	—	Optional description shown under the progress bar.