Reference
UIKit
Files

Files component

<wy-files> | WyFiles

The files component renders a complete and functional user interface for a file collaboration/storage with uploading, sharing, previewing, commenting and downloading of files.

Importing

If you installed the UIKit with npm you can use the following snippet to import the component into your project. Otherwise, if you installed the UIKit as a <script> you can ignore this section.

import { WyFiles } from "@weavy/uikit-web";

Examples

As seen in this example, specifying the app identifier (uid) is required, and automatically creates a corresponding app on your Weavy environment when the component is first initialized.

<wy-files uid="test-files" name="Test files"></wy-files>

It's often useful to base the uid on something that identifies the location where the component is rendered. Typically you would use something like a product id, page id, path or URL.

HTML attributes

Attributes can be set when using the component in HTML. All attributes have corresponding Javascript properties.

Most attributes are optional and/or has sensible default values. Any required attributes are indicated with an asterisk (*).

Learn more about attributes and properties.

Attribute	Value	Description
`uid`*	`string, number`	Unique identifier for the app.
`annotations`	`"buttons-inline", "none"`	Set the appearance of annotations. Defaults to `"buttons-inline"`.
`contextualData`	`string`	Contextual data for agents to reference.
`enterToSend`	`"never", "modifier", "auto", "always"`	Sets whether to use enter to send in the editor. `"modifier"` is `Enter` combined with `Ctrl` or `Cmd`. Defaults to `"auto"`.
`features`	`string`	Explicit space separated list of enabled features. All default features are enabled when this property is not defined.
`generateUid`	`string`	Generates a unique `uid` by appending user and agent identifiers to the supplied string.
`name`	`string`	Optional display name for the app (used in notifications etc.)
`order`	`{ by: string, descending: boolean }`	File order in the list. Order by combined with direction. Order by `"name"`, `"updated_at"` or `"size"`.
`reactions`	`string`	Space separated string of unicode emojis to use for reactions. Defaults to reactions from the `Weavy` instance or `<wy-context>`.
`showTrashed`		Enable showing trashed files.
`view`	`"list", "grid"`	The view for showing the file list.

JavaScript properties

Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable. Any required attributes are indicated with an asterisk (*).

Property	Type	Default	Description
`uid`	`string, number`		Unique identifier or app id for the Weavy component. The unique identifier should correspond to the uid of the app created using the server-to-server Web API.
`view`	`"grid", "list"`	`"list"`	The view for showing the file list. Persisted in sessionStorage.
`order`	`{ by: string, descending: boolean }`	`{ by: "name", descending: false }`	File order in the list. Persisted in sessionStorage.
`showTrashed`	`boolean`	`false`	Enables showing trashed files. Persisted in sessionStorage.
`app`	`AppType`		The app data.
`link`	`LinkType`		Any provided link that should be loaded, shown and highlighted.
`features`	`string`		Config for only enabling specific features in the weavy component.
`contextualData`	`string`		Contextual data for agents to reference. Provide descriptive data for optimal results. ### Examples
`generateUid`	`string`		Sets the uid property with automatically appended user and agent name (where applicable).
`name`	`string`		Optional display name for the app (used in notifications etc.)
`annotations`	`"buttons-inline", "none"`	`"buttons-inline"`	Appearance of annotations.
`enterToSend`	`"never", "modifier", "auto", "always"`	`"auto"`	Enter-to-send keymap in the editor. `"modifier"` is `Enter` combined with `Ctrl` or `Cmd`.
`reactions`	`string`	`"😍 😎 😉 😜 👍"`	A space separated string of available reaction emojis in unicode.

JavaScript methods

Methods for the component are available in JavaScript. Methods that are async return a promise.

Method	Description
`reset()`		Sets the component to it's initial state and resets the `app` state.
`subscribe(subscribe: boolean)`	async	Subscribes or unsubscribes to notification updates from the app. Check `.app.is_subscribed` to see current state.
`whenApp()`	async `AppType`	Waits for `app` data and returns the data when available.

DOM Events

The component triggers custom events that bubbles up the DOM tree. They can be listened to using the addEventListener() method.

Learn more about events.

Event	Type	Description
`wy-app`	`WyAppEventType`	Emitted when the app changes.
`wy-action`	`WyActionEventType`	Emitted when an action is performed on an embed.
`wy-preview-open`	`WyPreviewOpenEventType`	Emitted when preview is about to be opened. The event may be prevented.
`wy-preview-close`	`WyPreviewCloseEventType`	Emitted when preview is closed.

Slots

The slots can be used to inject elements into the component. All predefined child nodes of the slot will be replaced with the injected content.

Slot	Description
`actions`	Buttons placed in the toolbar.

To prevent child nodes from rendering before the component has loaded you can hide them using CSS.

wy-files:not(:defined) {
  display: none;
}

Available features

The following features are available for the component. Configure them with a space separated list using the features attribute. Features that are available but disabled by default are indicated by parenthesis ().

Learn more about features.

Feature	Description
`attachments`	Possibility to upload local files.
`cloud_files`	Cloud file picker (Google Drive, Dropbox etc.).
`comments`	Commentary feed on entities.
`context_data`	Possibility to upload contextual data.
`embeds`	Creating embeds from urls in editor text.
(`google_meet`)	Google Meet video meetings.
(`meetings`)	General availability for meetings. This can be ignored if using all individual meeting feature flags, i.e. `google_meet`, `microsoft_teams` and `zoom_meetings`.
`mentions`	Possibility to mention other people from the current directory in the editor.
(`microsoft_teams`)	Microsoft Teams video meetings.
`polls`	Possibility to create polls in editor.
`previews`	Previews of files and attachments.
`reactions`	Possibility to add emoji reactions to a message, post or comment. Disabling this feature will enable only the thumbs up reaction.
`versions`	Show file versions.
`web_dav`	Links to WebDAV functionality for document files.
(`zoom_meetings`)	Zoom video meetings.