SiFileDropzoneComponent documentation¶

selector

si-file-dropzone

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 or translation key for accepted types.
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.
maxFileSizeText ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Maximum upload size`	Text or translation key for max file size.
multiple ¶	`boolean`	`false`	Defines whether the file input allows selecting multiple files. When directoryUpload is enabled, this will have no effect.
uploadDropText ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`	Text or translation key of the drag&drop field (is combined with the `uploadTextFileSelect` ).
uploadTextFileSelect ¶	`TranslatableString`	$localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`	Text or translation key of the input file selector (is combined with the `uploadTextRest` ).

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. Invalid files are also included here, but with status 'invalid' and an errorText describing why they were ignored.

Attributes and Methods¶

Name	Type	Default	Description
reset() ¶	() => `void`		Reset all the files inside the native file input (and therefore the dropzone).

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

SiFileUploadDirective

¶

Class

▶

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)"
/>

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`)> = ...¶
Enable directory upload. directoryUpload: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
elementRef: `ElementRef`<`any`> = ...¶
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`¶
Event emitted when file validation errors occur, including files that were ignored due to size or type. fileError: `OutputEmitterRef`<`FileUploadError`> = ...¶
Event emitted when valid files are added. Also includes invalid files, but with status 'invalid' and an errorText describing why they were ignored. filesAdded: `OutputEmitterRef`<`UploadFile`[]> = ...¶
locale: `string` = ...¶
Define maximal allowed file size in bytes. maxFileSize: `InputSignal`<(`undefined` \| `number`)> = ...¶
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` = ...¶
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. validFiles: `OutputEmitterRef`<`UploadFile`[]> = ...¶

Methods

fileSizeToString

(num: number) => string¶

Parameters
num: `number`¶

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`¶

makeUploadFile

(file: File) => UploadFile¶

Parameters
file: `File`¶

onInputChange

(event: Event) => void¶

Parameters
event: `Event`¶

Reset the file input value
reset: () => void¶

Trigger the file input click
triggerClick: () => void¶

verifyFileSize

(size: number) => boolean¶

Parameters
size: `number`¶

verifyFileType

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

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

formatFileSize

(num: number, formatter: NumberFormat) => string¶

Parameters
num: `number`¶
formatter?: `NumberFormat`¶

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