Files component

The files component renders a complete and functional user interface for a Weavy Files app with uploading, sharing, previewing and downloading of files.

Element: <wy-files>
Class: WyFiles

Initialize app

Before the <wy-files> component can be loaded, a Files app with the corresponding uid must first be created in the Weavy environment. This is typically something you do in your server-side code before rendering the page. Here's what it would look like using curl.

curl https://{WEAVY-SERVER}/api/apps/init
-H "Authorization: Bearer {API-KEY}"
--json "{'app': { 'uid': 'customer-2-files', 'type': 'files', 'name': 'Customer Files' }, 'user': { 'uid': 'user-1' } }"

The code above creates a new Files app in Weavy (if it doesn't already exist). The uid is set to customer-2-files which is the same uid you'll use when adding the <wy-files> component to your HTML.

Additionally the user with uid=user-1 is added as a member (the user passed in is usually the authenticated user in your application).

Note: The unique ids (uid) used when creating apps, users etc. is something you decide what it should be. Since the apps are contextual, the uid is often related to the context it's in. For example product-123-chat, customer-2-files etc.


First import and configure Weavy and the WyFiles component.

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

const weavy = new Weavy();
weavy.url = "";
weavy.tokenFactory = async (refresh) => "token_from_server";

Then add the <wy-files> component to your HTML. Since it is a contextual app you must specify the uid property.

<wy-files uid="customer-2-files"></wy-files>


Property Type Default Description
uid string Unique identifier for the Files app to load
features FeaturesConfigType {} Overrides the default features available for the product

The available features are controlled by your product license. The features config is opt-out, meaning you can disable available features, but never enable features that are not included in your license.

Feature Description
attachments Disable the possibility to upload local files
cloudFiles Disable the cloud file picker (Google Drive, Dropbox etc.)
mentions Disable the possibility to mention other people in the directory in a file comment
previews Disable previews of files
reactions Disable the possibility to add emoji reactions to a file comment. Setting this to false will only enable the thumbs up reaction
comments Disable comments on a file
version Disable file versions
webDAV Disable webDAV functionality

Example: Disabling features for files app.

const files = new WyFiles();
files.features = {
    cloudFiles: false,
    comments: false



The WyFiles component emits the following events.

Event Detail Description
wy:file_created { file: FileType } New file created.
wy:file_updated { file: FileType } File updated.
wy:file_trashed { file: FileType } File trashed.
wy:file_restored { file: FileType } File restored.
wy:file_deleted { file: FileType } File permanently deleted.
Weavy Docs