Reference
UIKit
File new

Create new file component

<wy-file-new> | WyFileNew

Component for creating files, uploading files or linking cloud files to a files app.

Supports upload of multiple large files at once, upload using drag'n'drop and pasting files to upload. The file upload progress can be monitored and aborted.

Each file component requires an app identifier (uid), which automatically creates a corresponding app on your Weavy environment when the component is first initialized. The app identifier must correspond to the app of where you want to save the files. It's also recommended to specify a readable name of the files app, to get better readable notifications from the app.

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 displayed as a dropdown menu shown as a button. After the dropdown is a status icon button; shown when creating, uploading, attaching or modifying files in the app. The default height of the buttons is the icon size 1.5rem/24px together with the set --wy-padding (which defaults to 0.5rem/8px), which makes a total of 2.5rem/40px per default. The width varies with the length of the text and whether the status is displayed or not.

The cloud file picker appears as a modal overlay centered in the top layer.

The status detail dialog renders in a sheet overlay centered in the top layer.

All the overlays does not occupy any visual layout space where they are placed in the DOM, they only render in the top layer.

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 { WyFileNew } from "@weavy/uikit-web";

Examples

Default `<wy-file-new>` button

Displays a create/upload button for the test-files app with integrated file-creation, uploading and cloud file picker.

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

`<wy-file-new>` component without cloud files

Displays a create/upload button without the possibility to add files from cloud providers.

<wy-file-new uid="test-files" features="-cloud_files"></wy-file-new>

Connect `<wy-file-new>` to `<wy-files>` list

Displays a create/upload button that selects the created file in a <wy-files> component.

<wy-file-new uid="test-files id="file-picker"></wy-file-new>
<wy-files uid="test-files" id="files-list" ></wy-files>
<script>
  const filePicker = document.getElementById("file-picker");
  const filesList = document.getElementById("files-list");

  filePicker.addEventListener("wy-action", (e) => {
    if (e.detail.file) {
      // Select the added file
      filesList.selectedId = e.detail.file.id;      
    }
  })

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.
`directory`	`string`	Optional directory identifier (id or name) to associate the app with. Only applied when the app is first created and a single `uid` is used; the user must be a member of the directory.
`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.)

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	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.
`fileId`*	`number`	Id of the file to show.
`app`	`AppType`	The app data.
`directory`	`string`	Optional directory identifier (id or name) to associate the app with. Only applied when the app is first created and a single `uid` is used; the user must be a member of the directory.
`features`	`string`	Config for only enabling specific features in the weavy component.
`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.)

JavaScript methods

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

Method	Returns	Description
`createFile(ext?: string)`	async `FileType \\| undefined`	Prompts for a filename and creates a file. `ext` suggests a file extension.
`uploadFile(...files: File[])`	async `FileType` \| `FileType[]`	Upload one or more files. If no file is provided, the user will be prompted to select a file.
`selectCloudFiles()`	async `FileType[]`	Request files via user input from a configured cloud file provider.
`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.
`whenReady()`	async	Resolves when the component has rendered the first time.

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 entity.

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-file-new: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.

Feature	Description
`cloud_files`	Cloud file picker (Google Drive, Dropbox etc.).
`file_create`	Possibility to create files.
`file_edit`	Possibility to edit files.
`file_upload`	Possibility to upload files.