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
Usage
First import and configure Weavy
and the WyFiles
component.
import { Weavy, WyFiles } from "@weavy/uikit-web";
const weavy = new Weavy();
weavy.url = "https://myenvironment.weavy.io";
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.
The corresponding app will be created automatically on the server when a new uid
is defined.
You can also adjust permissions and details for the app using the Apps API.
<wy-files uid="customer-2-files"></wy-files>
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.
Properties
Property | Type | Default | Description |
---|---|---|---|
uid |
string |
Unique identifier for the Files app to load | |
features |
FeaturesConfigType |
{} |
Overrides the default features available for the product |
submodals |
boolean |
false |
Enables modal compatibility with other modals, backdrops and focus-traps. Note that it may have implications with layout (such as z-index effects) in your app. |
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. |
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,
};
document.body.append(files);
Events
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. |