Skip to main content

​
Overview

Upload component provides file upload functionality with drag-and-drop support, progress tracking, and preview capabilities.

​
Import

import { MagaryUpload } from 'ng-magary';

​
Basic Usage

<magary-upload
  [mode]="'basic'"
  [chooseLabel]="'Select File'"
  (onSelect)="onFileSelect($event)">
</magary-upload>

​
Advanced Mode

<magary-upload
  [mode]="'advanced'"
  [url]="'https://api.example.com/upload'"
  [name]="'file'"
  [multiple]="true"
  [accept]="'image/*'"
  [maxFileSize]="5000000"
  [chooseLabel]="'Select'"
  [uploadLabel]="'Upload'"
  [cancelLabel]="'Cancel'"
  (onUpload)="onUpload($event)"
  (onError)="onError($event)">
</magary-upload>

​
With File Type Restriction

<!-- Only images -->
<magary-upload
  [accept]="'image/*'"
  [maxFileSize]="5000000">
</magary-upload>

<!-- PDFs and Word documents -->
<magary-upload
  [accept]="'.pdf,.doc,.docx'">
</magary-upload>

​
Multiple Files

<magary-upload
  [multiple]="true"
  [accept]="'image/*'"
  (onSelect)="handleMultipleFiles($event)">
</magary-upload>

​
With HTTP Upload

<magary-upload
  [mode]="'advanced'"
  [url]="uploadUrl"
  [name]="'document'"
  [withCredentials]="true"
  (onUpload)="handleUploadComplete($event)"
  (onError)="handleUploadError($event)">
</magary-upload>

​
Input Properties

​
mode
'basic' | 'advanced'
default:"'basic'"
Upload mode (basic = auto, advanced = manual)
​
multiple
boolean
default:"false"
Allow multiple file selection
​
accept
string
default:"'*'"
Accepted file types (MIME or extensions)
​
maxFileSize
number
Maximum file size in bytes
​
url
string
default:"''"
Upload endpoint URL
​
name
string
default:"'file'"
Form field name for the file
​
chooseLabel
string
default:"'Choose'"
Label for choose button
​
chooseIcon
string
default:"'plus'"
Icon for choose button
​
uploadLabel
string
default:"'Upload'"
Label for upload button
​
uploadIcon
string
default:"'upload'"
Icon for upload button
​
cancelLabel
string
default:"'Cancel'"
Label for cancel button
​
cancelIcon
string
default:"'x'"
Icon for cancel button
​
withCredentials
boolean
default:"false"
Send credentials with upload request

​
Output Events

​
onUpload
EventEmitter<UploadEvent>
Callback when files are uploaded
​
onSelect
EventEmitter<UploadEvent>
Callback when files are selected
​
onClear
EventEmitter<void>
Callback when files are cleared
​
onError
EventEmitter<{error: string}>
Callback when an error occurs

​
Interfaces

interface UploadEvent {
  originalEvent: Event;
  files: File[];
}

​
Features

  • Drag and drop: Drop files onto the component
  • Multiple files: Upload multiple files at once
  • File type filtering: Accept specific file types
  • Size validation: Enforce maximum file size
  • Progress tracking: Visual upload progress
  • Image preview: Preview selected images
  • HTTP upload: Built-in HTTP upload support
  • File management: Remove files before upload
  • Custom icons: Customize button icons

​
Complete Example

<magary-upload
  [mode]="'advanced'"
  [url]="'https://api.example.com/upload'"
  [name]="'files'"
  [multiple]="true"
  [accept]="'image/png,image/jpeg'"
  [maxFileSize]="10000000"
  [chooseLabel]="'Select Images'"
  [uploadLabel]="'Upload All'"
  [cancelLabel]="'Clear'"
  (onSelect)="onSelect($event)"
  (onUpload)="onUpload($event)"
  (onError)="onError($event)"
  (onClear)="onClear()">
</magary-upload>

<div *ngIf="uploadedFiles.length > 0" class="mt-4">
  <h3>Uploaded Files</h3>
  <ul>
    <li *ngFor="let file of uploadedFiles">
      {{ file.name }} ({{ formatSize(file.size) }})
    </li>
  </ul>
</div>

​
Accessibility

  • Keyboard accessible file input
  • ARIA labels
  • Focus management
  • Screen reader support

Build docs developers (and LLMs) love

Get started for freeTalk to us