Skip to content

SiFileUploadDirective documentation

selector
input[type="file"][siFileUpload]

Directive for handling file uploads with validation for file type and size.

Example:

<input
  #fileInput
  type="file"
  class="d-none"
  siFileUpload
  [accept]="accept()"
  [maxFileSize]="maxFileSize()"
  [multiple]="true"
  (validFiles)="onFilesAdded($event)"
  (fileError)="onFileError($event)"
/>

Input Properties

Name Type Default Description
accept
 string Define which file types are suggested in file browser.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
directoryUpload
 boolean false Enable directory upload.
errorTextFileMaxSize
 TranslatableString $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{maxFileSize}}` Message or translation key if file exceeds the maximum file size limit.
errorTextFileType
 TranslatableString $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Invalid file type` Text or translation key of message title if incorrect file type is dragged / dropped.
maxFileSize
 number Define maximal allowed file size in bytes.
multiple
 boolean false Defines whether the file input allows selecting multiple files. When directoryUpload is enabled, this will have no effect.

Output Properties

Name Type Description
fileError
 FileUploadError Event emitted when file validation errors occur, including files that were ignored due to size or type.
filesAdded
 UploadFile[] Event emitted when valid files are added. Also includes invalid files, but with status 'invalid' and an errorText describing why they were ignored.
validFiles
 UploadFile[] Event emitted when valid files are added. Invalid files (due to size or type) will be ignored and instead the fileError event will be emitted.

Attributes and Methods

Name Type Default Description
fileSizeToString(...)
 (num: number) => string Parameters
formatFileSize(...)
 (num: number, formatter: NumberFormat) => string Parameters
handleFiles(...)
 (files: (FileList | null)) => void Handle files from input or drag and drop

Parameters
handleItems(...)
 (items: DataTransferItemList) => void Handle directory entries for drag and drop

Parameters
reset()
 () => void Reset the file input value
triggerClick()
 () => void Trigger the file input click

Types Documentation

(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
extends UploadFile
Properties
errorParams?: Record<string, unknown> from errorParams
errorText: TranslatableString
file: File from file
fileName: string from fileName
progress: number from progress
size: string from size
status: "invalid"
Properties
errorParams?: Record<string, unknown>
errorText?: TranslatableString
file: File
fileName: string
progress: number
size: string
status: ("error" | "invalid" | "success" | "added" | "queued" | "uploading")

Except where otherwise noted, content on this site is licensed under MIT License.