File-Selector – digital.sbb.ch

Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili: Deutsch

English

File-Selector.

Übersicht

Anteprima.

Senza zona di rilascio

Was macht die Komponente?

Mit dem File-Selector wählen Nutzende eine oder mehrere Dateien von ihrem Gerät aus. Die gewählten Dateien erscheinen mit Name und Grösse in einer Liste und lassen sich wieder entfernen. Es gibt zwei Varianten: Button und Dropzone. In der Dropzone lassen sich Dateien per Drag-and-drop ablegen.

Wann soll die Komponente eingesetzt werden?

Um Dateien wie Dokumente, Bilder oder Videos anzuhängen.
Um Formulare zu ergänzen, die Dateianhänge erfordern.

Anwendung

Regeln.

Die Dropzone eignet sich bei mehreren oder grossen Dateien, der Button bei einzelnen Dateien und wenig Platz.
Erlaubte Dateitypen werden eingeschränkt und für Nutzende angegeben.
Ob mehrere Dateien möglich sind, ist klar erkennbar.
Fehler (z.B. falscher Dateityp) werden mit einer verständlichen Fehlermeldung angezeigt.
Die Komponente wählt nur aus. Das Hochladen und ein allfälliger Fortschritt liegen in der Anwendung.
Mit einem eigenen Accessibility-Label unterscheiden sich Button und Dropzone für Screenreader.

Elementi.

Questo componente comprende diversi elementi utilizzabili in modo autonomo.

sbb-file-selector
sbb-file-selector-dropzone

Specifica.

Apri in Figma

Beispiele

Default.

Disabled.

Multi.

Multi Persistent.

With Error.

Only PDF.

Multi Size S.

Dropzone.

Dropzone Disabled.

Dropzone Multi.

Dropzone Multi Persistent.

Dropzone With Error.

Dropzone Only PDF.

Dropzone Multi Size M.

HTML in Zwischenablage kopiert.

Implementation

Web Components.

Il web component si trova nel pacchetto @sbb-esta/lyne-elements.

Storybook con esempi interattivi

Codice sorgente su GitHub

Documentazione.

The <sbb-file-selector> and <sbb-file-selector-dropzone> are components which allows user to select
one or more files from storage devices.
These are two variants with the same functionality.
When files are selected, they appear as a list below the button/dropzone area.
For each file, the name and the size are displayed and an icon allows for deletion.
The component mimics the native <input type="file"/>.

<sbb-file-selector></sbb-file-selector>

The dropzone variant is displayed as a panel on which files can more easily be dragged and dropped.
It is possible to customize the area's title via the titleContent property.

<sbb-file-selector-dropzone></sbb-file-selector-dropzone>

Slots.

The error named slot can be used to display an error message using the <sbb-error> component.

<sbb-file-selector>
  <sbb-error slot="error">An error occurred during file upload.</sbb-error>
</sbb-file-selector>

<sbb-file-selector-dropzone>
  <sbb-error slot="error">An error occurred during file upload.</sbb-error>
</sbb-file-selector-dropzone>

States.

User interaction can be disabled using the disabled property.

<sbb-file-selector disabled></sbb-file-selector>

<sbb-file-selector-dropzone disabled></sbb-file-selector-dropzone>

Multiple and multipleMode.

A single file can be selected by default; this can be changed setting the multiple property to true.

<sbb-file-selector multiple></sbb-file-selector>

<sbb-file-selector-dropzone multiple></sbb-file-selector-dropzone>

The value of the multipleMode property determines whether added files should overwrite existing files (default) or be appended to them (persistent).

<sbb-file-selector multiple multiple-mode="persistent"></sbb-file-selector>

<sbb-file-selector-dropzone multiple multiple-mode="persistent"></sbb-file-selector-dropzone>

Accept.

The accept property can be used to force the user to select one or more specific file types;
in the next example, only images are allowed.

<sbb-file-selector accept=".png,.jpg,.jpeg"></sbb-file-selector>

<sbb-file-selector-dropzone accept=".png,.jpg,.jpeg"></sbb-file-selector-dropzone>

Style.

The component has also two different sizes, s and m, which can be changed using the size property.

<sbb-file-selector size="s"></sbb-file-selector>

<sbb-file-selector-dropzone size="m"></sbb-file-selector-dropzone>

Events.

Whenever the selection changes, a filechanged event is fired, whose event.files property contains the list
of currently selected files. The list can also be retrieved using the public files getter.

Accessibility.

It's possible to improve the component accessibility using the accessibilityLabel property; this will be set
as aria-label of the inner native input and read together with the visible button text.
It's suggested to have a different value for each variant, e.g.:

<sbb-file-selector accessibility-label="Select a file from hard disk"></sbb-file-selector>
<sbb-file-selector
  multiple
  accessibility-label="Select from hard disk - multiple selection allowed"
></sbb-file-selector>

<sbb-file-selector-dropzone
  accessibility-label="Select a file from hard disk"
></sbb-file-selector-dropzone>
<sbb-file-selector-dropzone
  multiple
  accessibility-label="Select from hard disk - multiple selection allowed"
></sbb-file-selector-dropzone>

Angular.

Questo componente è disponibile anche per Angular nel pacchetto @sbb-esta/lyne-angular.

Panoramica Angular

API Angular

Esempi Angular

API

class: `SbbFileSelectorDropzoneElement`, `sbb-file-selector-dropzone`.

Properties.

Name	Attribute	Privacy	Type	Default	Description
`accept`	`accept`	public	`string`	`''`	A comma-separated list of allowed unique file type specifiers.
`accessibilityLabel`	`accessibility-label`	public	`string`	`''`	This will be forwarded as aria-label to the native input element.
`disabled`	`disabled`	public	`boolean`	`false`	Whether the component is disabled.
`files`	-	public	`Readonly<File>[]`	`[]`	The list of selected files.
`form`	-	public	`HTMLFormElement \| null`		Returns the form owner of this element.
`multiple`	`multiple`	public	`boolean`	`false`	Whether more than one file can be selected.
`multipleMode`	`multiple-mode`	public	`'default' \| 'persistent'`	`'default'`	Whether the newly added files should override the previously added ones.
`name`	`name`	public	`string`		Name of the form element. Will be read from name attribute.
`size`	`size`	public	`'s' \| 'm' \| null`	`null`	Size variant, either s (lean theme default) or m (standard theme default).
`titleContent`	`title-content`	public	`string`	`''`	The title displayed in `dropzone` variant.
`type`	-	public	`string`	`'file'`	Form type of element.
`validationMessage`	-	public	`string`		Returns the current error message, if available, which corresponds to the current validation state. Please note that only one message is returned at a time (e.g. if multiple validity states are invalid, only the chronologically first one is returned until it is fixed, at which point the next message might be returned, if it is still applicable). Also, a custom validity message (see below) has precedence over native validation messages.
`validity`	-	public	`ValidityState`		Returns the ValidityState object for this element.
`value`	-	public	`string \| null`		The path of the first selected file. Empty string ('') if no file is selected
`willValidate`	-	public	`boolean`		Returns true if this element will be validated when the form is submitted; false otherwise.

Methods.

Name	Privacy	Description	Parameters	Return	Inherited From
`checkValidity`	public	Returns true if this element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.		`boolean`	SbbFormAssociatedMixin
`formResetCallback`	public			`void`	SbbFileSelectorCommonElementMixin
`formStateRestoreCallback`	public		`state: FormRestoreState \| null, _reason: FormRestoreReason`	`void`	SbbFileSelectorCommonElementMixin
`reportValidity`	public	Returns true if this element has no validity problems; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.		`boolean`	SbbFormAssociatedMixin
`setCustomValidity`	public	Sets the custom validity message for this element. Use the empty string to indicate that the element does not have a custom validity error.	`message: string`	`void`	SbbFormAssociatedMixin

Events.

Name	Type	Description	Inherited From
`change`	`Event`	The change event is fired when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.	SbbFileSelectorCommonElementMixin
`filechanged`	`SbbFileChangeEvent`	An event which is emitted each time the file list changes.	SbbFileSelectorCommonElementMixin
`input`	`InputEvent`	The input event fires when the value has been changed as a direct result of a user action.	SbbFileSelectorCommonElementMixin
`validity`	`Event`	The validity event is dispatched whenever the validity state of the element changes.	SbbFormAssociatedMixin

Slots.

Name	Description
`error`	Use this to provide a `sbb-error` to show an error message.

class: `SbbFileSelectorElement`, `sbb-file-selector`.

Properties.

Name	Attribute	Privacy	Type	Default	Description
`accept`	`accept`	public	`string`	`''`	A comma-separated list of allowed unique file type specifiers.
`accessibilityLabel`	`accessibility-label`	public	`string`	`''`	This will be forwarded as aria-label to the native input element.
`disabled`	`disabled`	public	`boolean`	`false`	Whether the component is disabled.
`files`	-	public	`Readonly<File>[]`	`[]`	The list of selected files.
`form`	-	public	`HTMLFormElement \| null`		Returns the form owner of this element.
`multiple`	`multiple`	public	`boolean`	`false`	Whether more than one file can be selected.
`multipleMode`	`multiple-mode`	public	`'default' \| 'persistent'`	`'default'`	Whether the newly added files should override the previously added ones.
`name`	`name`	public	`string`		Name of the form element. Will be read from name attribute.
`size`	`size`	public	`'s' \| 'm' \| null`	`null`	Size variant, either s (lean theme default) or m (standard theme default).
`type`	-	public	`string`	`'file'`	Form type of element.
`validationMessage`	-	public	`string`		Returns the current error message, if available, which corresponds to the current validation state. Please note that only one message is returned at a time (e.g. if multiple validity states are invalid, only the chronologically first one is returned until it is fixed, at which point the next message might be returned, if it is still applicable). Also, a custom validity message (see below) has precedence over native validation messages.
`validity`	-	public	`ValidityState`		Returns the ValidityState object for this element.
`value`	-	public	`string \| null`		The path of the first selected file. Empty string ('') if no file is selected
`willValidate`	-	public	`boolean`		Returns true if this element will be validated when the form is submitted; false otherwise.

Methods.

Name	Privacy	Description	Parameters	Return	Inherited From
`checkValidity`	public	Returns true if this element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.		`boolean`	SbbFormAssociatedMixin
`formResetCallback`	public			`void`	SbbFileSelectorCommonElementMixin
`formStateRestoreCallback`	public		`state: FormRestoreState \| null, _reason: FormRestoreReason`	`void`	SbbFileSelectorCommonElementMixin
`reportValidity`	public	Returns true if this element has no validity problems; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user.		`boolean`	SbbFormAssociatedMixin
`setCustomValidity`	public	Sets the custom validity message for this element. Use the empty string to indicate that the element does not have a custom validity error.	`message: string`	`void`	SbbFormAssociatedMixin

Events.

Name	Type	Description	Inherited From
`change`	`Event`	The change event is fired when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.	SbbFileSelectorCommonElementMixin
`filechanged`	`SbbFileChangeEvent`	An event which is emitted each time the file list changes.	SbbFileSelectorCommonElementMixin
`input`	`InputEvent`	The input event fires when the value has been changed as a direct result of a user action.	SbbFileSelectorCommonElementMixin
`validity`	`Event`	The validity event is dispatched whenever the validity state of the element changes.	SbbFormAssociatedMixin

Slots.

Name	Description
`error`	Use this to provide a `sbb-error` to show an error message.

Navigieren auf digital.sbb.ch

Anteprima.

Was macht die Komponente?

Wann soll die Komponente eingesetzt werden?

Regeln.

Elementi.

Specifica.

Web Components.

Documentazione.

Slots.

States.

Multiple and multipleMode.

Accept.

Style.

Events.

Accessibility.

Angular.

class: SbbFileSelectorDropzoneElement, sbb-file-selector-dropzone.

Properties.

Methods.

Events.

Slots.

class: SbbFileSelectorElement, sbb-file-selector.

Properties.

Methods.

Events.

Slots.

class: `SbbFileSelectorDropzoneElement`, `sbb-file-selector-dropzone`.

class: `SbbFileSelectorElement`, `sbb-file-selector`.