File Manager overview

SVAR Svelte File Manager is an easy-to-use widget designed to be part of your Svelte application for exploring the file system of a user's device. It allows users to manage files of any format by organizing and previewing, uploading and downloading, searching and copying them, and even more.

License: SVAR File Manager is free to use under the MIT license.

Main UI elements

This section describes the File Manager widget UI.

File Manager main view consists of the following elements:

• the Navigation pane or the main directory tree where you can browse through your folders or add new files and folders
• the Content pane represents the content of the current folder. Here you can interact with files via the context menu, navigate to other folders by clicking "back to parent folder" or via the breadcrumbs. You can also change the way this pane looks by switching a display mode
• the Toolbar with the following controls:
  • the Search bar where you can search for the desired files
  • the Preview button that will give you detailed information about the files
  • buttons to switch between display modes

Display modes

• Cards (default). This mode provides a preview of each file. Items are displayed in the form of cards

• Table. In this mode you can view each file size and its creation date. Items are displayed in the form of a table

• Panels. In this mode you are able to open two different folders and work with them simultaneously. You can also move files from one directory to another

Adding and uploading files/folders

There are 2 ways to add new files to your manager: create new files/folders or upload already existing files.

To create a new file, follow the steps below:

1. In the Navigation pane, click the Add New button
2. In the dropdown menu that appears, select the option you need

3. In the dialog that appears, enter the file or folder name, and click OK

You cannot upload folders. It's possible to upload one or multiple files at a time.

The easiest way to upload a file is to drag-n-drop it right into File Manager.

Or you can also follow the steps below:

1. In the navigation pane, click the Add New button
2. In the dropdown menu that appears, select Upload file
3. In the browse window that appears, select files to upload

Previewing files

To get information on the file size, type, and its creation date, in the Content pane, select a file and in the Toolbar, click the Preview button.

Copying and moving files/folders

To move/copy files or folders from one directory to another take the following steps:

1. Select file(s) you want to move/copy. To copy/move more than one file or folder you should hold the Ctrl key down while selecting items. For range selection hold Shift. To select all files in the current directory, use the Ctrl + A shortcut.

2. To move files/folders, press the Ctrl + X shortcut or click the Cut option from the right click menu. To copy items, press Ctrl + C shortcut or click the Copy option from the right click menu.

3. Go to the folder you want to move/paste the items in and press Ctrl + V or click the Paste option from the right click menu. You can also right click on an empty space inside the target folder and select the Paste option from the menu.

Searching

To find desired file(s) just start typing the text in the Search bar. You can focus the search bar by pressing the Ctrl + F shortcut.

You can perform all the available operations with the found files as well as open their location via the context menu or by pressing Ctrl + Alt + O.

Renaming

You can rename only one file/folder at a time.

To rename a file/folder, select it and follow the steps below:

1. Right-click the item, and then in the context menu, select Rename or press Ctrl + R
2. In the dialog that appears, enter a new name for the file/folder

Downloading files

To download a file, right-click the file, and then in the context menu, select Download or press Ctrl + D.

You can also download a file from the preview panel by clicking the Download button in the right upper corner of the preview panel:

Deleting files/folders

To delete a file/folder, follow the steps below:

1. Select all the necessary files/folders
2. Right-click the selected items, and in the context menu select Delete or press the Del/Backspace key.

All selected files will be permanently deleted.