Preview

Usage

<cs-s3-resource-selector></cs-s3-resource-selector>

<script>
  const selector = document.querySelector('cs-s3-resource-selector');
  selector.resource = { uri: 's3://my-application-bucket/config/settings.json' };
  selector.addEventListener('change', (event) => {
    console.log('Selected resource:', event.detail.resource);
  });
</script>

Properties

aria-describedbystring

Adds aria-describedby to the component. If you're using this component within a form field, don't set this property because the form field component automatically sets it.

Use this property if the component isn't surrounded by a form field, or you want to override the value automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description and set the property to a string of each ID separated by spaces (for example, "id1 id2 id3").

aria-labelstring

Adds aria-label to the component.

aria-labelledbystring

Adds aria-labelledby to the component. If you're using this component within a form field, don't set this property because the form field component automatically sets it.

Use this property if the component isn't surrounded by a form field, or you want to override the value automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.

buckets-is-item-disabled(item: S3ResourceSelectorProps.Bucket) => boolean

Optionally overrides whether a bucket should be disabled for selection in the Buckets view or not. It has higher priority than selectableItemsTypes. Example: if selectableItemsTypes has ['buckets'] value and bucketsIsItemDisabled returns false for a bucket, then the bucket is disabled for selection.

buckets-visible-columnsReadonlyArray<string>

Optionally overrides the set of visible columns in the Buckets view. Available columns: 'Name', 'CreationDate', and 'Region'.

fetch-buckets() => Promise<ReadonlyArray<S3ResourceSelectorProps.Bucket>>required

Specifies a function that returns all available buckets. The return type of the function should be a promise that resolves to a list of objects with the following properties:

• Name (string) - Name of the bucket.
• CreationDate (string) - (Optional) Creation date of the bucket.
• Region (string) - (Optional) Region of the bucket.

fetch-objects(bucketName: string, pathPrefix: string) => Promise<ReadonlyArray<S3ResourceSelectorProps.Object>>required

Specifies a function that returns available objects and object prefixes for the given bucketName and pathPrefix. The return type of the function should be a promise that resolves to a list of objects with the following properties:

• Key (string) - Name of the object or object prefix.
• LastModified (string) - (Optional) Date when this object was last modified.
• Size (number) - (Optional) Size of the object.
• IsFolder (boolean) - (Optional) Determines whether the entry is an object prefix (folder).

fetch-versions(bucketName: string, pathPrefix: string) => Promise<ReadonlyArray<S3ResourceSelectorProps.Version>>required

Specifies a function that returns available versions for the given bucketName and pathPrefix. The return type of the function should be a promise that resolves to a list of versions with the following properties:

• VersionId (string) - Version ID of an object.
• LastModified (string) - (Optional) Date when this object was last modified.
• Size (number) - (Optional) Size of the object version.

get-modal-rootPortalProps['getContainer']

Use this property to specify a different dynamic modal root for the dialog. The function will be called when a user clicks on the trigger button.

i18n-stringsS3ResourceSelectorProps.I18nStrings

An object containing all the necessary localized strings required by the component.

input-aria-describedbystring

Adds aria-labelledby to the S3 URI input. If you're using this component within a form field, you do not need to set this property, as the form field component will set it automatically.

Use this property if the component isn't surrounded by a form field, or you want to override the value automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.

input-placeholderstring

Adds a placeholder to the S3 URI input.

invalidboolean

Whether the S3 URI input field is in invalid state.

objects-is-item-disabled(item: S3ResourceSelectorProps.Object) => boolean

Optionally overrides whether an object should be disabled for selection in the Objects view or not. Similar to bucketsIsItemDisabled this property takes precedence over the selectableItemsTypes property.

objects-visible-columnsReadonlyArray<string>

Optionally overrides the set of visible columns in the Objects view. Available columns: 'Key', 'LastModified', and 'Size'.

remove-modal-rootPortalProps['removeContainer']

Use this property when getModalRoot is used to clean up the modal root element after a user closes the dialog. The function receives the return value of the most recent getModalRoot call as an argument.

resourceS3ResourceSelectorProps.Resourcerequired

The current selected resource. Resource has the following properties:

• uri (string) - URI of the resource.
• versionId (string) - (Optional) Version ID of the selected resource.

selectable-items-typesReadonlyArray<S3ResourceSelectorProps.SelectableItems>

An array of the item types that are selectable in the table view. The array may contain the following items: 'buckets', 'objects', or 'versions'. Example: ['buckets', 'objects']. By default, no items are selectable. This property determines whether the component operates in Read mode or Write mode:

• Read mode - When 'objects' and 'versions' values are provided (folder selection should be disabled by customizing objectsIsItemDisabled function).
• Write mode - When 'buckets' and 'objects' values are provided (file selection should be disabled by customizing objectsIsItemDisabled function).

versions-is-item-disabled(item: S3ResourceSelectorProps.Version) => boolean

Optionally overrides whether a version should be disabled for selection in the Versions view or not. Similar to bucketsIsItemDisabled this property takes precedence over the selectableItemsTypes property.

versions-visible-columnsReadonlyArray<string>

Optionally overrides the set of visible columns in the Versions view. Available columns: 'ID', 'CreationDate', and 'Size'.

view-hrefstring

Href of the selected object that is applied to the View button.

Slots

alert

Specifies additional information about component status.

Events

changeCustomEvent<S3ResourceSelectorProps.ChangeDetail>

Fired when the resource selection is changed. The event detail object contains resource that represents the full path of the selected resource and errorText that may contain a validation error.

inputBlurCustomEvent<null>

Called when input focus is removed from the S3 URI input.

inputFocusCustomEvent<null>

Called when input focus is moved to the S3 URI input.