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:File exceeds allowed maximum size`	Message or translation key if file exceeds the maximum file size limit.
errorTextFileType ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`	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	Description
fileSizeToString(...) ¶	(num: `number`) => `string`	Parameters num: `number`
formatFileSize(...) ¶	(num: `number`, formatter: `NumberFormat`) => `string`	Parameters num: `number` formatter: `NumberFormat`
handleFiles(...) ¶	(files: (`null` \| `FileList`)) => `void`	Handle files from input or drag and drop Parameters files: (`null` \| `FileList`)
handleItems(...) ¶	(items: `DataTransferItemList`) => `void`	Handle directory entries for drag and drop Parameters items: `DataTransferItemList`
reset() ¶	() => `void`	Reset the file input value
triggerClick() ¶	() => `void`	Trigger the file input click

Types Documentation¶

TranslatableString (`string` & `Translatable`)¶ Type alias 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.

FileUploadError

extends UploadFile¶

Interface

Properties
errorText: `TranslatableString`¶
file: `File` from `file`¶
fileName: `string` from `fileName`¶
progress: `number` from `progress`¶
size: `string` from `size`¶
status: `"invalid"`¶

UploadFile

¶

Interface

Properties
errorText?: `TranslatableString`¶
file: `File`¶
fileName: `string`¶
progress: `number`¶
size: `string`¶
status: (`"error"` \| `"invalid"` \| `"success"` \| `"added"` \| `"queued"` \| `"uploading"`)¶

Translatable ¶ import imported from @siemens/element-translate-ng

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