Getting started

This page describes how to start with Svelte File Manager widget by adding File Manager to your Svelte application.

Step 1. Install the package

SVAR FileManager is an open-source library distributed under the MIT license.

Install package from NPM.

npm install wx-svelte-filemanager

Working with Svelte 4.x

If you want to use the library with an older version of the Svelte toolkit, you can do so by using the 1.x version of the widget

npm install wx-svelte-filemanager@1.3.0

Step 2. Create and initialize Filemanager

Import the Filemanager component to your project:

<script>
  import { Filemanager } from "wx-svelte-filemanager";
</script>

Initialize the Filemanager properties.

The example below creates the File Manager with two folders and three files. The data array holds the files structure, paths to the items, creation dates and the sizes of items. Do not forget to define the data component inside the Filemanager tag.

<script>
  import { Filemanager } from "wx-svelte-filemanager";

  const rawdata = [
    {
      id: "/Code",
      size: 4096,
      date: new Date(2023, 11, 2, 17, 25),
      type: "folder",
    },
    {
      id: "/Music",
      size: 4096,
      date: new Date(2023, 11, 1, 14, 45),
      type: "folder",
    },

    {
      id: "/Info.txt",
      size: 1000,
      date: new Date(2023, 10, 30, 6, 13),
      type: "file",
    },
    {
      //parent: "/Code/Datepicker",
      id: "/Code/Datepicker/Year.svelte",
      size: 1595,
      date: new Date(2023, 11, 7, 15, 23),
      type: "file",
    },
    {
      id: "/Pictures/162822515312968813.png",
      size: 510885,
      date: new Date(2023, 11, 1, 14, 45),
      type: "file",
    },
  ];
</script>

<Filemanager
 data={rawdata}
/>

More instructions about loading data you can see here: Loading data.

Step 3. Apply a theme

To give some look and feel to the application, import one of the predefined themes, which will also make all elements display correctly:

• Willow
• WillowDark
• Material

<script>
    import { Material } from "wx-svelte-filemanager"; 
</script>

Apply the desired theme by wrapping Filemanager into the required theme tag:

<script>
 import { Filemanager } from "wx-svelte-filemanager";
 import { getData } from "./common/data";
 import { Willow } from "wx-svelte-filemanager";

</script>

<Willow>
  <Filemanager data={getData()} />
</Willow>

What's next

Now you can dive deeper into the File Manager API and configure it to your needs:

• Guides pages where you can learn about styling, loading data, and other helpful tips to go smoothly with the File Manager configuration
• File Manager API with the description of all functionality
• Helpers such as RestDataProvider will make the process of working with backend easy and enjoyable