Installation and initialization

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

Installing File Manager

To install the Svelte File Manager widget, you can run the following command:

npm install wx-svelte-filemanager

//yarn
yarn add 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

Initializing

Import the Filemanager component:

<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. It's necessary 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} />

Now you can move forward and load data. See Loading data.