1. Reference
2. UIKit
3. Files

Files component

<wy-files> | WyFiles

Component for file management and collaboration. Supports uploading of multiple files at once, upload using drag'n'drop and pasting files to upload. Upload progress can be monitored and aborted. The files can be downloaded individually or as a compressed archive.

Includes file picker to link files from Cloud providers such as Google Drive, Dropbox, Box and Microsoft OneDrive, which are pre-configured when using default weavy.io hosting for the Weavy environment.

Images, audio, video, documents, code, and cloud files can be previewed with the built-in previewer for 100+ formats including images, streamed audio/video, PDF, Office and Google Drive.

The list can be displayed as a table or as a grid with sorting capabilities. Files can renamed directly in the list.

Each file can be discussed with rich comments with support for attachments, mentions, embedded links and more.

File uploads are automatically versioned with possibility to preview all versions and rollback to a specific version.

Office documents and spreadsheets can be opened and edited directly in Office using built-in WebDAV integration to automatically save new version back to the app.

Each files component requires an app identifier (uid), which automatically creates a corresponding app on your Weavy environment when the component is first initialized. It's also recommended to specify a readable name of the posts app, to get better readable notifications from the app. 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 or path.

Auto-creating an app from markup uses default settings; only name and directory can be set this way and they can't be changed afterwards from the client (attempts result in access denied). For greater control — setting access, members or metadata — use the Apps API to create or update the app server-side. See initializing apps.

Component layout

The component is block-level with pre-defined CSS styling to adapt to flex- and grid-layouts as well as traditional flow-layouts. It's usually recommended to use a proper flex-layout for the container you are placing the component in for a smooth layout integration.

The height grows with the content per default. Content is automatically loaded during scrolling when the last content becomes visible (aka infinite scrolling). If placed in a flex- or grid-layout or if an explicit height is set, the component becomes scrollable.

The content within the component is per default aligned to the edges of it's own box. It's recommended to add your default padding to the container or to the component to make it fit your design. If you want the component to go all the way to the edges of your container without any outermost roundness or padding, you can set the padding to 0 and set the --wy-border-radius-outer to 0 to make the component align nicely with the edge.

You can add additional styling using CSS Custom Properties and CSS Shadow Parts and further customization using slots.

Importing

If you added the UIKit with npm you can use the following snippet to import the component into your project.

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

Examples

Standard files component

Displays a list of files with integrated uploading, cloud picker, previews, comments and versioning.

Specifying the app identifier (uid) is required, and automatically creates a corresponding app on your Weavy environment when the component is first initialized. It's recommended to specify a readable name of the posts app, to get better readable notifications from the app.

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

Files component with grid display sorted by date

Displays a grid view with miniature thumbnails for each file. Files ar sorted by updated_at in reverse order.

<wy-files
  uid="test-files"
  name="Test files"
  view="grid"
  order="{ by: 'updated_at', descending: true }"
></wy-files>

Files component without header

Displays a list of files without the header bar (header="none" attribute).

<wy-files id="files-list" uid="test-files" header="none"></wy-files>

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.

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 (*).

JavaScript methods

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

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.

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.

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 (). You can disable any features by prefixing them with negative -.

Learn more about features.