SiFileUploaderComponent documentation¶

selector

si-file-uploader

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
acceptText ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`	Text for the accepted file types.
autoUpload ¶	`boolean`	`false`	Auto-upload mode - automatically start upload once files are added.
cancelButtonText ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.CANCEL:Cancel`	Text of cancel button. Shown during upload. Required for a11y.
clearButtonText ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.CLEAR:Clear`	Text used inside the clear button.
directoryUpload ¶	`boolean`	`false`	Enable directory upload mode. When enabled, the file input will accept directories and upload all files within as a flat list. The hierarchy of the directory will not be preserved. The `maxFiles` property will have no effect when `directoryUpload` is enabled. Note: This feature is not yet available for safari (iOS)
disableUpload ¶	`boolean`	`false`	Disable the upload button.
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 shown to indicate that an incorrect file type was added to file list.
errorUploadFailed ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.UPLOAD_FAILED:Upload failed`	Text shown if the upload failed.
maxConcurrentUploads ¶	`number`	`3`	Maximum number of concurrent uploads.
maxFiles ¶	`number`	`10`	Define maximal allowed number of files. When directoryUpload is enabled, this will have no effect.
maxFileSize ¶	`number`	`undefined`	Define maximal allowed file size in bytes.
maxFileSizeText ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Maximum upload size`	Text to describe the maximum file size.
maxFilesReachedText ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.MAX_FILE_REACHED:Maximum number of files reached`	Error message shown when the maximum number of files are reached.
removeButtonText ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.REMOVE:Remove`	Text shown to remove a file from the file list. Required for a11y.
retries ¶	`number`	`0`	Numbers of retries for failed uploads.
showHttpError ¶	`boolean`	`false`	On failed upload, show the error received from the server.
successTextTitle ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.UPLOAD_COMPLETED:Upload completed`	Text shown if the upload was successful.
uploadButtonText ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.UPLOAD:Upload`	Text used inside the upload button.
uploadConfig ¶	`FileUploadConfig`	`{ headers: new HttpHeaders({ 'Accept': 'application/json' }), method: 'POST', url: '', fieldName: 'upload_file', responseType: 'json' }`	Config for HTTP request to upload file.
uploadDropText ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`	Text instructing a user to drop the files inside the dropzone.
uploadingText ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.UPLOADING:Uploading`	Text shown during the file upload.
uploadTextFileSelect ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`	Text of the link to open the file select dialog (follows `uploadDropText` ).

Output Properties¶

Name	Type	Description
filesChanges ¶	`UploadFile`[]	Output which fires whenever new files are added to or removed from the uploader.
uploadCanceled ¶	`UploadFile`	Emits when a user press cancel during upload. The event provides the file details.
uploadCompleted ¶	`FileUploadResult`	Output callback event will provide you if upload is finished. If an error occurred it will be emitted.

Attributes and Methods¶

Name	Type	Default	Description
fileUpload(...) ¶	(doRetry: `boolean` = `true`) => `void`		Uploads the file Parameters doRetry: `boolean` = `true`
reset(...) ¶	(emit: `boolean` = `true`) => `void`		Reset the state. Parameters emit: `boolean` = `true`

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.

FileUploadConfig

¶

Interface

Properties
Additional form fields added in the HTTP request. Example: `on { upload_user: 'Reiner Zufall', expiry_date: ' 21.12.2012' }` additionalFields?: `Record`<`string`, `string`>¶
Form field name for the uploaded file. fieldName: `string`¶
A function to modify the HTTP request sent on the consumer side. handler?: (req: `HttpRequest`<`unknown`>) => `Observable`<`HttpEvent`<`unknown`>>¶
headers: (`string` \| `HttpHeaders` \| `Record`<`string`, (`string` \| `number` \| (`string` \| `number`)[])> \| `Headers`)¶
method: (`"POST"` \| `"PUT"` \| `"PATCH"`)¶
Specify the server response type responseType?: (`"text"` \| `"json"` \| `"arraybuffer"` \| `"blob"`)¶
When `true` , the file will be sent directly w/o the use of `FormData` . You will also need to set the `Content-Type` header when sending binary. See: headers sendBinary?: `boolean`¶
url: `string`¶

UploadFile

¶

Interface

Copyright (c) Siemens 2016 - 2025 SPDX-License-Identifier: MIT

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

FileUploadResult

¶

Interface

The FileUploadResult is emitted at completion of the file uploading via the uploadCompleted emitter. On success the Http response from the backend is provided and on failure, the error object is available.

Properties
error?: `Error`¶
file: `string`¶
response?: `HttpResponse`<`unknown`>¶

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

SiFileDropzoneComponent

¶

Class

▶

Constructor
() => `{}`¶

Properties
Define which file types are suggested in file browser. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept accept: `InputSignal`<(`undefined` \| `string`)> = ...¶
Text or translation key for accepted types. acceptText: `InputSignal`<`TranslatableString`> = $localize`:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`¶
Enable directory upload. directoryUpload: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
dragOver: `boolean` = `false`¶
Message or translation key if file exceeds the maximum file size limit. errorTextFileMaxSize: `InputSignal`<`TranslatableString`> = $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size`¶
Text or translation key of message title if incorrect file type is dragged / dropped. errorTextFileType: `InputSignal`<`TranslatableString`> = $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`¶
fileInput: `Signal`<`ElementRef`<`any`>> = ...¶
Event emitted when files are added. filesAdded: `OutputEmitterRef`<`UploadFile`[]> = ...¶
icons: `Record`<`"elementUpload"`, `string`> = ...¶
locale: `string` = ...¶
Define maximal allowed file size in bytes. maxFileSize: `InputSignal`<(`undefined` \| `number`)> = ...¶
maxFileSizeString: `Signal`<`string`> = ...¶
Text or translation key for max file size. maxFileSizeText: `InputSignal`<`TranslatableString`> = $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Maximum upload size`¶
Defines whether the file input allows selecting multiple files. When directoryUpload is enabled, this will have no effect. multiple: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
numberFormat: `NumberFormat` = ...¶
Text or translation key of the drag&drop field (is combined with the `uploadTextFileSelect` ). uploadDropText: `InputSignal`<`TranslatableString`> = $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`¶
Text or translation key of the input file selector (is combined with the `uploadTextRest` ). uploadTextFileSelect: `InputSignal`<`TranslatableString`> = $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`¶

Methods

dragOverHandler

(event: DragEvent) => void¶

Parameters
event: `DragEvent`¶

dropHandler

(event: DragEvent) => void¶

Parameters
event: `DragEvent`¶

fileSizeToString

(num: number) => string¶

Parameters
num: `number`¶

handleFiles

(files: (null | FileList)) => void¶

Parameters
files: (`null` \| `FileList`)¶

handleItems

(items: DataTransferItemList) => void¶

Parameters
items: `DataTransferItemList`¶

inputEnterHandler: () => void¶

inputHandler

(event: Event) => void¶

Parameters
event: `Event`¶

makeUploadFile

(file: File) => UploadFile¶

Parameters
file: `File`¶

Reset all the files inside the native file input (and therefore the dropzone).
reset: () => void¶

verifyFileSize

(size: number) => boolean¶

Parameters
size: `number`¶

verifyFileType

(fileType: (undefined | string), ext: (undefined | string)) => boolean¶

Parameters
fileType: (`undefined` \| `string`)¶
ext: (`undefined` \| `string`)¶

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