Assets Tab: File Storage

Assets tab provides access to all files uploaded into the project — it serves as the file storage for the project.

You can upload the following into the file storage:

• Images — files in formats: jpg, png (will be converted to webp); tiff, tif, bmp (will be converted to jpg); svg, gif, webp
• Video — uploaded files will be converted to mp4 format
• Documents — files in formats: doc, xls, txt, pdf, scripts and others

Advantages of file storage:

• Uploading and storage of not only images and videos, but also files of any formats.
• Centralized storage for all files of the project.
• Quick access to all files from the left panel — convenient for browsing and adding files on the canvas.

How to Upload Files to the Storage

You can upload files in the following ways:

1. Upload Button

Click Upload button on the upper right corner of Assets panel. A window will open displaying the list of files on your computer. You can select one or multiple files at once.

2. Drag&drop from the Computer

Drag file from the computer to Assets panel. You can drag one or multiple files at once.

How to View File in the Storage

Assets Panel Display

Assets tab can be viewed in two modes:

• Narrow panel — by default
• Wide panel — for more convenient file browsing

To open the wide panel, click the button in the top of Assets panel.

To close the wide panel and switch back to narrow mode, click the cross (X) in the upper right corner of the wide panel.

The total number of files in the project you can see at the bottom of the panel.

Filtering and Searching Files

Files can be filtered by the following types:

• All assets
• Images
• Video
• Documents

To do this, click on the drop-down list and select the desired file type.

Images and documents can be filtered by file extension

To do this, open Images or Documents category, click on the dropdown list and select the desired file extension.

Inside each category (Images, Video, Documents), you can search for files by their names. To do this, open the desired category and start typing the file name in Search field — a list of files containing the entered characters will appear.

Actions with Files in the Storage

Besides uploading and viewing files, you can also perform the following actions on Assets tab:

• Delete. File will be deleted from the project.
• Open. File will open in a new browser tab. If opening in the browser is unavailable (ex., the browser does not support .doc files), the file can be downloaded to the computer.
• Copy link. You can either copy an absolute or a relative link / for opening or downloading the file.
• Replace. Replacement is available only for files in Documents category. You can replace a previously downloaded file with another one while retaining the same link.

To open the available actions in Assets narrow panel, right-click on the file.

In Assets wide panel:

To copy and view files — hover over file preview and use icons in the upper right corner.

To delete files — select files by clicking checkbox in the upper left corner of preview and then click Delete button at the bottom of the panel.

How to Use Files Uploaded to the Storage

Once you’ve uploaded files to the storage, you can use them in your project by adding them to the canvas as widgets or links.

Adding images and video to a page

There are two ways to do this:

1. Simply drag and drop image or video from the left panel directly onto the canvas. This will automatically create the corresponding widget — Image or Video.

2. Add an Image or Video widget to the canvas manually and double-click on it. The left panel will then display the list of images or videos uploaded to the project. Find the desired file and click on it once — it will be inserted into the widget.

For Rich Text widget and Rich Text field in collections, as well as Background Image (in Background property), a separate pop-up window opens with available Images and Video assets.

Adding a file to your website as a link for viewing or downloading

For each uploaded file, you can copy to the clipboard a link to it for viewing or downloading.

For example, you can upload a pdf file with a menu to a restaurant’s website, which can be opened in a browser tab for viewing. And to a building materials supplier's website, you can upload an xls file with material prices, which can be downloaded to a computer or phone.

Example of adding a downloadable file link

1. Open Assets panel, then find the necessary file and right-click on it. In the menu, select — Copy link → Relative link → Copy for download.

2. Select the item/element to which you want to add the link. It can be any item/element that has “Go to Link” Action in the settings: Text Link, Link Block, Button, or Menu Link.

3. Go to Settings on the right panel, add Action → On click → Go to link, and paste the copied link into the field.

4. Save changes, publish the page and check the functionality.

Uploading Additional Scripts for the Website

You can upload scripts to you project and reference them in the custom code or Embed widget using src parameter.

This is especially useful for those who use js-libraries. You can upload all necessary scripts into the project and not worry that your website will stop working due to issues on a third-party server hosting the scripts.

This is especially useful for those who use js-libraries. You can upload all necessary scripts into the project and not worry that your website will stop working due to issues on a third-party server hosting the scripts.