Creates a file upload field.

Requires a corresponding script in the backend which receives the file upload.

Expects as return value a JSON object in the form of {"files": [{"name": "...", "deleteUrl": "..."}]} or {"files": []} (=> for deletion) or {"file": [], "error": "..."} (=> when error)

Creates two input fields. One of type "file" and one "hidden" (with the name appended by "_path"). The hidden input field will contain the name of the file on the server.

To prefill the component with a file, the fileNameOnServer property needs to be set but to have the prefilled file also be displayed to the user and deletable the fileName and deleteUrl needs to be set.

  • The default slot is for description (hidden for screen readers).
  • Slot "sr" is for screen readers text.
  • Slot "sr-error" for error text for screen readers.
  • Slot "icon" for placing an icon.

Properties

announcementDeleted: string = 'Datei gelöscht'

Text which is announcement by a screen reader when a file got deleted successfully.

buttonClass: string = ''

Classes added to the wrapped button element

buttonText: string = 'Datei-Upload'

The text of the button.

confirmDelete: boolean

The user has to confirm the deletion of an already uploaded file.

confirmDeleteNoText: string = 'abbrechen'

Text of the abort button for the deletion of an already uploaded file.

confirmDeleteText: string = 'Achtung, {filename} ist bereits hochgeladen. Bei Bestätigung wird {filename} wieder gelöscht. Hier kann nur eine Datei hochgeladen sein.'

Text shown when asked to confirm the deletion of an already uploaded file.

confirmDeleteYesText: string = 'bestätigen'

Text of the confirmation button for the deletion of an already uploaded file.

deleteUrl: string

An url which has to be called to delete the uploaded file on the server.

errorDeleteText: string = 'Fehler beim Datei löschen.'

General delete error text.

errorSizeText: string = 'Die Datei ist zu gross.'

Error text shown when the file size exceeded the permitted size.

errorTypeText: string = 'Ungültiges Dateiformat.'

Error text shown when the permitted file types don't match.

errorUploadText: string = 'Fehler beim Dateiupload.'

General upload error text.

fileName: string

The name of the file which will be displayed to the user.

fileNameOnServer: string

The name of the file on the server.

iconWrapperClass: string = ''

Classes added to the icon wrapper element

inputId: string

The id of the input[type="file"] field.

Also the id appended by "_path" of a hidden input field which will contain the name of the file on the server.

maxFileSize: number

The maximum permitted file size in kb.

name: string

The name of the input[type="file"] field.

Also the name appended by "_path" of a hidden input field which will contain the name of the file on the server.

permitedFileTypes: string | [string]

Deprecated

permittedFileTypes: string | [string]

The permitted file extensions. Either a file extension as a string, an array of file extensions as strings or JSON string of such an array.

progress: number = null

The progress of the upload between 0 and 100.

To hide the progress bar, set it to null.

successText: string = '<hylo-sr-only>Erfolgreicher Upload von </hylo-sr-only>{fileName}</br>(<hylo-sr-only>Button drücken um </hylo-sr-only>Datei löschen)'

Text shown after a successful upload. {fileName} will be replaced with the file name. HTML permitted.

url: string

The url of the backend script which will receive the file.

Methods

  • Deletes the currently uploaded file from the server again.

    Returns Promise<void>

Events

hyloFileDeleted: EventEmitter<string>

Fires when a file got deleted.

hyloFileUploaded: EventEmitter<string>

Fires when a file got uploaded.

hyloHasFocus: EventEmitter<boolean>

Fires when the component gains or looses focus through the "tab" key. The component also toggles the class "hylo-has-focus".

The emitted boolean value indicates whether the component gained or lost the focus.

Generated using TypeDoc